CSSテキストシャドウジェネレーター
最大4つのレイヤーのオフセット、ぼかし、色と不透明度を備えたtext-shadow CSSを構築します。独自のテキストでライブプレビュー表示し、宣言、完全なCSSルール、およびHTMLをコピーできます。
入力
プレビューとHTMLスニペットにのみ使用されます。シャドウはどのテキストでも機能します。
レイヤーはカンマで区切られます。リストの最初のレイヤーが上に描画されます。
シャドウはダークとライトの背景で見え方が大きく異なります。ページに合わせてください。
100%未満の不透明度では、色はrgba()として記述されます。
出力
シャドウ付きテキストがここに表示されます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-text-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "NEON",
"fontSize": "96",
"fontFamily": "sans",
"fontWeight": "400",
"textColor": "#ffffff",
"bgColor": "#0b0b1a",
"layers": "4",
"offsetX1": "0",
"offsetY1": "0",
"blur1": "4",
"color1": "#ffffff",
"opacity1": "100",
"offsetX2": "0",
"offsetY2": "0",
"blur2": "10",
"color2": "#ff00de",
"opacity2": "100",
"offsetX3": "0",
"offsetY3": "0",
"blur3": "20",
"color3": "#ff00de",
"opacity3": "100",
"offsetX4": "0",
"offsetY4": "0",
"blur4": "40",
"color4": "#ff00de",
"opacity4": "100"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-text-shadow-generator` tool (CSS Text Shadow Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-text-shadow-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSテキストシャドウジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSS text-shadowプロパティは小さいですが多機能です。1つのレイヤーで柔らかいドロップシャドウが得られます。複数のレイヤーを重ねるとネオン効果、重いレトロ3D文字、シャープなアウトライン、またはレタープレス効果が実現します。難しい部分は数値です。各レイヤーに2つのオフセット、ぼかし半径、色があり、レイヤーが相互作用しているのが見えるときにだけ効果が完成します。このジェネレータにより、各レイヤーをスライダーで調整し、独自のテキストで結果を確認して、すぐに使用できるCSSをコピーできます。
使い方
- サンプルテキストを入力し、フォント、ウェイト、サイズを選択します。これらはプレビューとHTMLスニペットにのみ影響するため、シャドウはどのテキストでも機能します。
- テキストと背景の色をページに合わせて設定します。紺色で見栄えの良いグローが白では消えてしまう場合があります。
- 必要なシャドウレイヤーの数を選択します（1～4）。各レイヤーに独自のコントロールがあります。
- 水平/垂直オフセット: シャドウが右/下にどれくらい移動するか（負の値は左/上に移動）。
- ぼかし半径: 0でハードエッジコピー、高い値でグロー効果。
- シャドウ色と不透明度: 100%未満の不透明度では色が
rgba()として記述されます。
- 出力をコピーします。1行の
text-shadow宣言、完全なCSSルール（フォント、色、シャドウ）、および対応するHTMLスニペットが得られます。
例を試すをクリックして4レイヤーのネオングローを読み込みます。これは積み重ねたレイヤーの組み合わせを素早く確認できます。下記のレシピで他の古典的な見た目の正確な値が得られます。
レイヤード化されたテキストシャドウの仕組み
text-shadowはoffset-x offset-y blur-radius colorとして記述されたシャドウのカンマ区切りリストを受け取ります。リストの最初のシャドウが上に描画され、その後のシャドウは前のシャドウの後ろに配置されます。この順序により古典的な効果が機能します。
- ネオングロー: ゼロオフセットで増加するぼかし:
0 0 4px #fff、その後0 0 10px、0 0 20px、0 0 40pxを#ff00deなど明るい色で。文字の近くで明るく、外側にフェードアウトするハローを作成します。暗い背景で使用してください。 - レトロ3D: ハードシャドウ（ぼかし0）が対角線方向に暗くなるグラデーション（
2px 2px 0、4px 4px 0、6px 6px 0）で文字を押し出します。最終的にぼかした半透明レイヤー（10px 10px 8px、30%黒）で固定します。 - アウトライン: 4つのハードシャドウ（
-2px -2px 0、2px -2px 0、-2px 2px 0、2px 2px 0）がグリフのまわりにストロークを描きます。-webkit-text-strokeと異なり、すべての環境で機能します。 - レタープレス: 明るい
0 1px 0シャドウ（80%白）と上部の暗い0 -1px 0（20%黒）でテキストがページに押し込まれた見た目になります。中灰色の背景で最適に機能します。
box-shadowと異なり、text-shadowには広がり値がなく、insetキーワードもありません。カードやボタンにこれらが必要な場合は、代わりにCSSボックスシャドウジェネレーターを使用してください。
パフォーマンスとアクセシビリティのヒント
- 大きなテキストブロック上の大きなぼかし半径は描画時間がかかります。複数レイヤーの重いグロー効果は本文ではなくヘッダーに使用してください。
- シャドウはテキストコントラスト率に含まれません。テキスト色だけが背景とのコントラスト比が十分であることを確認してください。シャドウは小さいサイズで可読性を低下させる可能性があります。
- アニメーション効果については、CSSグリッチテキストジェネレーターをご覧ください。文字の周りではなく内部の色については、グラデーションテキストCSSジェネレーターをお試しください。
プライバシー
すべてブラウザで実行されます。テキストと設定がアップロードされることはありません。