CSS テキスト シャドウ ジェネレーター

CSS テキスト シャドウ ジェネレーターは、CSS テキスト シャドウ プロパティのビジュアル エディターです。 水平方向のオフセット、垂直方向のオフセット、ぼかしの半径、色、不透明度をスライダーで調整し、サンプル テキストでの効果のレンダリングを確認してから、正確な CSS をコピーします。 ピクセル値を推測してページを更新する代わりに、影を直接形作り、生成するコードを読み取ります。

CSS text-shadow generator、text shadow generator CSS tool または CSS shadow text generator を検索しても、出力は同じ単一宣言です。 hard プリセットをクリックすると、Generated CSS ボックスに text-shadow: 2px 2px 0px #00000099; が表示されます。これは、60% の不透明度で 1 つの黒いレイヤーであり、最後の 16 進数 2 桁に不透明度が書き込まれています。 「Neon Glow」をクリックすると、7px、14px、28px のぼやけで 3 つのカンマ区切りのレイヤーが得られます。 「CSS」には、セミコロンを含む行全体がコピーされます。

text-shadow プロパティは box-shadow よりもシンプルです - スプレッド半径がなく、挿入キーワードもありません - しかし、レイヤー化は強力になる場所です 1 つの宣言で複数のシャドウを積み重ねることができ、それぞれに独自のオフセット、ぼかし、色を積み重ねることができます レイヤーを積み重ねることは、ネオン グロー、ハード アウトライン、レトロな 3D レタリング、活版印刷のエンボス効果、長いフラット シャドウを手書きで書くことは面倒なことです。そのため、このツールはレイヤーを管理し、スペック有効でカンマ区切りの宣言を正しいペイント順序で出力します。

すべてのブラウザで発生します。 Neon Glow や Outline などのプリセットを選択し、各レイヤーを調整し、プレビューを明るい背景と暗い背景に切り替え、サンプル テキストを編集して CSS をコピーします。 アカウントもアップロードもありません。ページが読み込まれた後もオフラインで動作します。

レイヤー順序は、最初に実行します, 前から後ろへ, だから、最初にリストされた影は上に置きます. それはアウトラインを動作させるものです: 4 つの小さな影は、各方向に1 ピクセルをオフセット, スタック, CSSが直接プロパティを持っていないストロークを近似します. ぼかし半径はレンダリングする高価な部分です, そしてスクロールに再塗装いくつかの大きなぼかしを持つテキストは、低電力デバイス上のジャンクの一般的な原因である影は決してレイアウトに影響しません, そう彼らは彼らのボックスをオーバーフローし、オーバーフローが隠れて親によってクリップすることができます。