CSSグラデーション・シャドウ生成
プレビューを見ながらグラデーションとボックスシャドウを作成し、CSSコードをコピーできます。
グラデーション
ストップは2〜5個まで使用でき、位置の小さい順に並べ替えて出力されます。
プレビュー
生成されたCSS
ボックスシャドウ
シャドウレイヤーは最大4つまで使用できます。
プレビュー
生成されたCSS
CSSグラデーション・シャドウ生成の使い方
値を変更すると、プレビューとCSSコードがすぐに更新されます。気に入った結果になったら「CSSをコピー」を押して、スタイルシートに貼り付けてください。
制限
- 色は #RGB、#RGBA、#RRGGBB、#RRGGBBAA 形式の16進数のみ使用でき、先頭の # は省略できます。
- 範囲外の数値は、最も近い許容値に設定されます。角度は0〜360、位置と不透明度は0〜100、オフセットと広がりは-200〜200、ぼかしは0〜200です。
- 数値は小数第2位まで使用されます。
- 円形グラデーションは、常に中心から広がる円になります。
よくある質問
入力内容はサーバーに送信されますか？
いいえ。すべてこのブラウザ内で計算され、入力内容と結果は保存もアップロードもされません。再読み込みすると初期値に戻ります。
ストップの順序を変えると結果は変わりますか?
出力されるCSSは、常に位置の小さい順に並べ替えられます。同じ位置のストップは、入力した順序のままです。
不透明度はどのように適用されますか?
シャドウの色が8桁の16進数でアルファ値を持つ場合は、不透明度 (%) が掛けられ、rgba() として出力されます。透明でない場合は、6桁の16進数として出力されます。