CSS視覚効果ジェネレーター

CSS視覚効果ジェネレーターとは

背景のgradient、要素のbox-shadow、文字のtext-shadow、描画全体へ作用するfilterを、1ページで切り替えて作成するツールです。各モードの設定は独立しており、切り替えてもページを再読み込みするまでは保持されます。

グラデーション

linear-gradient()、radial-gradient()、conic-gradient()と各repeating形式に対応します。最大8色のカラーストップ、角度、中心位置を調整でき、同じ色位置による硬い境界も作れます。

background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%);

ボックス影

box-shadowは要素のボックスへ影を付けます。X・Y、blur、負値も使えるspread、色、opacity、insetを設定し、最大8個の影を表示順どおりに並べられます。blurには負値を指定できません。

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);

文字影

text-shadowは文字へ影や発光表現を付けます。複数影、発光・ネオン・立体風プリセット、サンプル文字、文字サイズ、文字色、背景を調整できます。box-shadowとは異なりspreadとinsetはありません。

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

フィルター

Filter Effects Module Level 1のblur、brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、opacity、saturate、sepiaに対応します。複数のfilter関数は左から右へ順番に適用されるため、画面の↑・↓と生成コード、プレビュー、コピー内容は常に同じ順番です。

filter: blur(4px) brightness(120%);

影とdrop-shadowの違い

drop-shadow()は透明部分を考慮した輪郭へ影を付けます。Filter Effects Level 1ではspread、inset、1関数内の複数shadowを受け付けないため、複数の影はdrop-shadow関数自体を複製します。ボックス全体ならbox-shadow、文字ならtext-shadowを使います。

入力とコピー

不正な値はCSSへ反映せず、直前の正常なプレビューを維持します。各モードで宣言全体と値・関数のみをコピーでき、リセットは選択中の効果だけを初期状態へ戻します。

よくある質問