CSS ジェネレーター
グラデーション・影・角丸を目で見ながら調整
ブラウザ内で処理
オプション
結果
結果
background: linear-gradient(135deg, #1fa89c 0%, #7c3aed 100%);
コピーした宣言を、そのまま CSS のセレクタ内に貼り付けてください。
影やグラデーションの構文には4つ5つの数値が並び、コードから効果を思い描ける人はいません。プレビューが良く見えるまでスライダーを動かして、ルールを持ち帰ってください。
使い方
- 1 作りたいものを選びます。
- 2 プレビューを見ながらスライダーと色を調整します。
- 3 生成された CSS をコピーします。
- 4 セレクタの中に貼り付けます。
よくある質問
box-shadow の値はそれぞれ何ですか。
水平方向のずれ、垂直方向のずれ、ぼかし、広がり、色です。ぼかしは輪郭を柔らかくし、広がりはぼかす前に影全体を拡大縮小します。垂直方向を正の値にして小さめのぼかしを入れると、光源が上にあるように見えます。
自然な影にするには。
水平方向のずれを0に近く保ち、垂直方向に小さな正の値を入れ、ぼかしはそのずれの2〜3倍にします。灰色ではなく不透明度の低い黒を使ってください。灰色の影は色の付いた背景の上では平板に見えます。
inset は何をしますか。
影を要素の外側ではなく内側に描きます。浮き上がるのではなく、押し込まれたように見えます。入力欄やオン状態のボタンに向いています。