CSS text-shadow ジェネレーター

CSS text-shadow ジェネレーターの使い方

このツールでは、文字の影の位置・ぼかし・色・透明度を入力するだけで CSSのtext-shadowを自動生成できます。 設定した影は右側のプレビューへリアルタイムで反映されます。

1. Preview Textに確認したい文字を入力します。
2. X・Yで影の横方向・縦方向の位置を調整します。
3. Blurで影のぼかし具合を設定します。
4. Color・Opacityで影の色と透明度を設定します。
5. 複数の影を重ねたい場合は「シャドウを追加」を押します。
6. 完成したCSSを「CSSをコピー」ボタンでコピーします。

CSSのtext-shadowとは？

text-shadowは、文字に影を付けるためのCSSプロパティです。 影の位置やぼかし、色を指定することで、 文字を浮き上がらせたり、立体感や発光表現を加えたりできます。

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

text-shadowの各値について

複数のtext-shadowを重ねる方法

CSSのtext-shadowは、カンマで区切ることで複数の影を同時に指定できます。 このツールでは「シャドウを追加」から最大5個まで影を作成できます。

text-shadow:
	2px 2px 4px rgba(0, 0, 0, 0.3),
	-2px -2px 0 rgba(255, 255, 255, 1);

複数の影を重ねることで、文字の縁取りや立体文字、 ネオン風の発光など、1つの影では作れない表現ができます。

text-shadowで文字の縁取りを作るには？

上下左右にぼかし0の影を配置すると、 text-shadowを使って簡単な文字の縁取りを作ることもできます。

text-shadow:
	1px 0 0 #000,
	-1px 0 0 #000,
	0 1px 0 #000,
	0 -1px 0 #000;