ネオン文字のCSS作成ツール
CSSのtext-shadowを使って、ネオンのように発光する文字を作成するCSSジェネレーターです。
プレビュー
<span class="neon-text">{{text}}</span>
.neon-text {
font-size: {{size}}px;
color: {{color_text}};
text-shadow:
{{shadow_value}};
}
機能・使い方
- CSSの
text-shadowを複数重ねることで、ネオンのようなきらびやかな発光表現を作成します。 - 文字色(中心の色)とネオン色(発光する色)を個別に設定できます。
- 「光量・広がり」スライダーを調整することで、光の強さ(ぼかし範囲)を簡単に変更できます。
CSSプロパティの説明
text-shadowプロパティを複数重ねることでネオンの発光を表現しています。
ぼかしが小さい影(文字の輪郭)から、ぼかしが大きい影(広がる光)へと段階的に重ねることで、中心が明るく周囲がぼんやり光るリアルなネオン効果を作り出しています。