CSS Gradient Generator
Create CSS gradients
Create CSS gradients ブラウザ内でローカルに実行
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
CSS グラデーション ジェネレーターは、2 つの色と角度から実際の線形または放射状のグラデーションを構築し、フルサイズで表示し、CSS を提供します。角度は人々が誤解している部分です。CSS では、0 度は上を指し、方向は時計回りに回転します。つまり、90 度は左から右、180 度は上から下です。それを間違えると、最初はグラデーションが逆さまに見えることがよくあります。どちらの色も 8 桁のアルファ値を保持できます。これにより、ヒーロー イメージ上でグラデーションをフェードアウトすることができます。
Where people use the
- 2 つのブランドカラーの間でフェードインするヒーローの背景を構築します。
- コードにコミットする前に、どの角度が正しく見えるかをテストします。
- カードまたはボタンに微妙な垂直グラデーションを生成します。
- 写真を暗くする半透明のオーバーレイを作成します。
How to use the
- 1
開始色と終了色を選択してください
カラーピッカーを使用するか、16 進値を入力します。プレビューと CSS は、変更すると更新されます。
- 2
リニアまたはラジアルを選択してください
線形は選択した角度でボックスを横切ります。ラジアルは中心から外側に向かって円状に広がります。
- 3
角度を設定する
スライダーを 0 度から 360 度までドラッグします。 0 度が上、90 度が右、180 度が下、270 度が左であることを覚えておいてください。
- 4
CSSをコピーする
このルールは背景宣言であり、スタイルシートに直接貼り付けることも、必要に応じて背景画像プロパティに貼り付けることもできます。
ヒントとベストプラクティス
- テキストを含む背景の場合は、輝度の差を小さくすることをお勧めします。それは気を散らすというよりむしろテクスチャとして読み取れます。
- グラデーション上のテキストの場合は、平均だけでなく、最も明るい点と最も暗い点のコントラストを確認してください。
- 勾配を 2 つまたは 3 つのストップに保ちます。さらに濁って見える傾向があります。
よくある質問
角度はどちらを向いていますか?
0 度は要素の上部を指し、角度は時計回りに増加します。つまり、90度は右に進み、180度は下に進みます。右から反時計回りに角度を計算することに慣れていると、これは直観に反します。
グラデーションが縞模様に見えるのはなぜですか?
輝度が近い 2 つの色は、8 ビット ディスプレイ上で、特に広い領域にわたって目に見える段差を引き起こすためです。通常、微妙な 3 番目の絞りを追加するか、わずかに広い輝度範囲を使用すると、それが隠れます。
透明を使用できますか?
はい。完全に透明の場合は 667eea00、半分の場合は 667eea80 など、8 桁の 16 進数値を使用すると、グラデーションはその後ろにあるものの上にフェードアウトします。
グラデーションはどこでもサポートされていますか?
線形グラデーションと放射状グラデーションは、現在のすべてのブラウザーで接頭辞なしでサポートされています。ベンダー プレフィックスは、Safari と Android の非常に古いバージョンにのみ必要です。これは、実際には、2015 年頃以降にビルドされたものは何もないことを意味します。
グラデーションが表示されないのはなぜですか?
要素には高さがないためです。グラデーションは要素のボックスにペイントされるため、空の div は高さ 0 に折りたたまれ、何も表示されません。高さを設定するか、コンテンツを追加します。
3 つ以上のカラーストップが生成されますか?
いいえ、このツールは 2 つを処理します。マルチストップ グラデーションの場合は、生成された CSS を取得し、手動でストップを追加します。構文は、単に複数の色とパーセンテージのペアをカンマで区切ったものです。