カテゴリー: 開発ツール
CSS text-shadow ジェネレーター
複数の text-shadow を重ねて CSS をコピー
オフセット、ぼかし、色、不透明度を設定すると、それを基準にした複数レイヤーの text-shadow 宣言が生成されます。ライブプレビューと、完成した CSS のコピーボタンも用意されています。
影のプレビュー
出力
text-shadow: 1px 1px 2px rgba(23, 33, 28, 0.5), 1px 1px 4px rgba(23, 33, 28, 0.39), 2px 2px 6px rgba(23, 33, 28, 0.28);
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
text-shadow を1つだけ指定すると平坦で輪郭のはっきりした影になりますが、柔らかいグローや重なったドロップシャドウのような効果を出すには、オフセットとぼかしが少しずつ縮み、不透明度がフェードしていく複数のレイヤーが必要です。このツールは、box-shadow レイヤージェネレーターと同じ重ね方の手法を使い、設定した基準のオフセット・ぼかし・色・不透明度からそのレイヤー一式を導き出すので、コンマ区切りの影を何個も手書きする代わりに、1つの影について考えるだけで済みます。
使い方
- 生成するレイヤー数と、基準となるオフセット・ぼかしを設定します。
- 色と不透明度を選びます。
- ライブプレビューを確認し、text-shadow 宣言をコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- レイヤーを増やすとなぜ影が柔らかくなるのですか?
- レイヤーが増えるたびに文字に向かって縮小しながら不透明度がフェードするため、レイヤー全体としては輪郭のはっきりしたコピーが1つあるのではなく、影のなめらかなグラデーションのように見えます。
- サーバーに何か送信されますか?
- いいえ。宣言は設定した値からページ内で計算されるため、プレビューが即座に更新されます。
- ネオンやグロー効果にも使えますか?
- 使えます。明るい色に大きなぼかしと複数レイヤーを組み合わせるとグローに見え、暗い色に小さいオフセットと弱いぼかしを組み合わせると控えめな奥行きの影に見えます。