🔤 1つのツールキットで
あらゆるデザイン作業を

テキストシャドウ生成

リアルタイムプレビューで多層テキストシャドウをデザイン。オフセット、ぼかし、色、不透明度を調整し、CSS を即コピー。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🔤 テキストシャドウ生成

テキストシャドウガイド

テキストシャドウは見出しやヒーローテキストに奥行きと強調を加えます。元の文字の背後にぼかしたコピーをずらして配置することで、浮き上がるような立体感が生まれ、ごちゃごちゃした背景でも可読性が向上します。

水平・垂直オフセット、ぼかし半径、影の色、不透明度、文字色、フォントサイズを調整できます。Canvasプレビューはブラウザでの表示を忠実に再現し、CSS出力はそのままスタイルシートに貼り付け可能です。

Pro Tips

Frequently Asked Questions

Q: text-shadowとbox-shadowの違いは?
text-shadowとbox-shadowの違いは?text-shadowは文字のグリフに、box-shadowは要素の矩形ボックスに適用されます。text-shadowにはspread(広がり)パラメータがありません。
Q: 複数のテキストシャドウを追加できますか?
複数のテキストシャドウを追加できますか?はい。同じ宣言内で各影をカンマで区切ります。例:text-shadow: 2px 2px 4px rgba(0,0,0,.5), 6px 6px 12px rgba(0,0,0,.25);
Q: テキストシャドウがぼやけて見えるのはなぜ?
テキストシャドウがぼやけて見えるのはなぜ?ぼかしの値を確認してください——20pxを超えると非常に拡散します。また、影の色が背景に対して十分なコントラストを持つことも確認しましょう。
Q: text-shadowはパフォーマンスに影響しますか?
text-shadowはパフォーマンスに影響しますか?最小限です。いくつかのtext-shadowなら影響は無視できる程度で、モバイル端末でも同様です。
Q: text-shadowでネオンの光る効果は作れますか?
text-shadowでネオンの光る効果は作れますか?はい。オフセットを0 0にし、完全に不透明な明るい色を使い、ぼかしを15〜30pxに増やします。複数の色を重ねるとより強い輝きになります。

日本の伝統色・和色

和色は平安時代の襲(かさね)の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。

山吹色 #F8B500

山吹の花に由来する黄金色。JIS慣用色名

撫子色 #EEA9A9

ナデシコの花の淡いピンク。平安時代から愛される

浅葱色 #00A3AF

新選組の羽織で有名な青緑色

茜色 #B7282E

茜草の根から染めた深い赤。夕焼けの色

若草色 #C3D825

春の新芽を思わせる明るい黄緑

瑠璃色 #1E50A2

仏教の七宝「瑠璃」に由来する深い青

桜色 #FEF4F4

桜の花びらのようなごく淡いピンク

藤色 #BBBCDE

藤の花の淡い紫。春の代表色

常磐色 #007B43

常緑樹の深い緑。永遠を象徴する

小豆色 #96514D

小豆に由来する渋い赤褐色

Q: 和色とは何ですか?
和色とは何ですか?和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか?
山吹色はどんな色ですか?山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。