CSS Box Shadow・グラデーション生成

1. Box Shadowまたはグラデーションの編集パネルを選びます。
2. スライダー、色、角度、形状などを調整します。
3. 中央のプレビューで見た目を確認します。
4. 生成されたCSSをコピーしてスタイルシートへ貼り付けます。

横位置、縦位置、ぼかし、広がり、色、透明度、内側の影を個別に設定できます。数値を動かすたびにプレビューとCSSコードが更新されるため、ブラウザで見た印象を確認しながら調整できます。

線形グラデーションは角度を指定でき、円形グラデーションは中心位置を選べます。3つのカラーストップと停止位置を設定し、不要な色は無効化できます。

コピーした宣言を対象要素のCSSルールへ貼り付けます。影はbox-shadow、グラデーションはbackgroundとして出力します。現在の主要ブラウザ向けに標準構文を生成します。

CSSの知識がなくても使えますか？

はい。プレビューを見ながらスライダーを動かし、完成したコードをコピーできます。

複数の影を重ねられますか？

はい。最大3層の影を有効化し、層ごとに位置・ぼかし・色を調整できます。

入力した設定は送信されますか？

いいえ。プレビューとコード生成はすべてブラウザ内で行います。

生成結果はブラウザのCSS描画に依存します。利用先の対応ブラウザとデザインガイドに合わせて最終確認してください。