オーダーメイドのテキストシャドウ
オフセット・ぼかし・色・不透明度を設定し、2層目を追加し、文字上のライブプレビュー付きでtext-shadowを取得。
-
1層目を設定
X・Y・ぼかし・色・不透明度。
-
2層目を有効化
輪郭や発光に。
-
CSSをコピー
1つのプロパティ、貼り付け可能。
プロパティの構造
| 部分 | 例 | 役割 |
|---|---|---|
| オフセットX | 2px | 水平（負=左） |
| オフセットY | 2px | 垂直（負=上） |
| ぼかし | 4px | 影の拡散 |
| 色 | rgba(124, 58, 237, 0.5) | 色相と不透明度 |
既定の層：text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5);。プレビューと計算は100%ローカル。
よくある質問
text-shadow の仕組みは？
プロパティは順に：水平オフセットX、垂直オフセットY、ぼかし半径、そして色。例：text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5)。負の値は左/上にずらします。
複数の影を重ねられる？
はい、カンマ区切りで。本ツールは2層対応：1層目が主な影、2層目（任意）が別色の輪郭や発光を追加します。
発光（glow）効果の作り方は？
XとYを0にし、ぼかしを上げ、不透明度の高い鮮やかな色を選びます。光が文字の周りに均一に広がります。層を複製すると強まります。
影は可読性を損なう？
強すぎる影は妨げになります。本文は軽いぼかしと控えめな不透明度に、強い効果は大きな見出しに。プレビューで判断できます。