CSS グラデーションジェネレーター

グラデーションは色ではなく画像

CSS グラデーションは linear-gradient、radial-gradient、conic-gradient といった関数によって生成され、それぞれが色ではなく画像値を生み出します。このたった1つの事実が、グラデーションのふるまいのほとんどを説明します。結果が画像であるため、画像を取るプロパティ、たいていは background や background-image に割り当てることになり、ほかの背景と同じようにタイル状に並んだり、拡大縮小したり、重なったりします。グラデーションには固有のサイズもなく、入れたボックスを何であれ満たします。だからこそ同じグラデーションでも、ボタンの上では急に、ヒーローセクション全体では緩やかに見えるのです。

線形グラデーションと向き

線形グラデーションは、まっすぐな軸に沿って色を混ぜ合わせます。その軸は、角度か、キーワードによる方向のどちらかで設定します。角度は真上から時計回りに測るので、0deg は下から上へ、90deg は左から右へ、180deg は上から下へと走ります。to right や to bottom right といったキーワード形式は、単純なケースではしばしば分かりやすく、固定の角度ではボックスの形が変わると正確にはできない「角をぴったり指す」という利点もあります。

このツールの角度スライダーは、度の値を自動で書いてくれます。ちょっとしたコツとして、135deg あたりのわずかに斜めに走るグラデーションは、平らな垂直や水平の混色よりもほぼ常に洗練されて見えます。目が斜めを、表面をかすめて差す光として読み取るからです。

放射状グラデーションと扇形グラデーション

放射状グラデーションは、中心点から同心円状に外側へ向かって色を混ぜ合わせるので、スポットライト、やわらかなビネット、グローに最適です。既定ではボックスを満たす楕円を形成しますが、完全な円にしたり中心を移動させたりできるので、ハイライトをど真ん中ではなく角に置くこともできます。放射状グラデーションは、光や焦点が1点から来ているように見せたいときの自然な選択肢です。

扇形グラデーションは、中心から外へではなく、時計の針のように中心の周りで色を回転させます。この回転の掃引こそが、扇形グラデーションを円グラフ、カラーホイール、そしてカードのアクセントとしてますます一般的になっている扇形グローの基盤にしています。すでに理解しているのと同じカラーストップがそのまま当てはまり、線形・放射状・扇形の間で変わるのは、それらがどう配置されるかという幾何だけです。

カラーストップと位置

あらゆるグラデーションはカラーストップによって定義されます。各ストップは色と、グラデーション線に沿った任意の位置で、ふつうは 0 から 100 までのパーセントで書きます。2つのストップで単純な混色になり、増やせばグラデーションをいくつもの色に通せます。位置を省くとブラウザはストップを均等に配置しますが、手で設定することこそが、各色がどこに位置し、各遷移にどれだけの余地が与えられるかを正確に制御する方法です。

位置はなめらかに増えていく必要はなく、そこがグラデーションの面白くなるところです。2つのストップを近くに寄せると速い遷移になり、離して広げると遅く穏やかな遷移になります。2つのストップに同じ位置を与えて混色をまるごとなくすこともでき、これが次の技の鍵になります。

ハードストップ：ストライプ、帯、そして形

隣り合う2つのカラーストップが同じ位置を共有すると、その間の遷移は距離ゼロで起こり、混色ではなくくっきりした縁が生まれます。このパターンを繰り返せば、ストライプ、チェッカーボード、プログレスバー、色分けされた帯が、画像なしですべて CSS で描けます。たとえば、1つ目の色を 0 から 50 パーセントまで、2つ目の色を 50 から 100 パーセントまで保持するグラデーションは、真ん中できれいに2色に分かれます。

ハードストップを repeating-linear-gradient や repeating-radial-gradient と組み合わせると、パターンがボックス全体に自動でタイル状に並ぶので、短い宣言1つからキャンディストライプ、斜めの注意テープ、細いガイド線を作れます。ビットマップではなくベクトル演算なので、どんなサイズでもどんな画素密度でもかみそりのように鋭いままです。

透明度と重ね合わせ

グラデーションのストップはアルファチャンネルを持つ色を使え、完全に透明な色へフェードさせることは、できる中でも最も役立つ手の1つです。単色から透明へ走るグラデーションは、写真の下端でテキストの背後に見えるスクリム、スクロールするリストの端のフェードアウト、やわらかな画像マスクを作り出します。1つ注意点があります。一部の色補間では、ただの透明へフェードすると途中でくすんだグレーの中間点を通ってしまうことがあるので、むき出しの transparent キーワードへではなく、同じ色のアルファをゼロにしたものへフェードさせると、よりきれいな結果が得られます。

グラデーションは画像なので、background プロパティはカンマで区切られた複数のものを受け付け、手前から奥へと描画されます。控えめな透明のグラデーションをベースのグラデーションの上に重ねることが、画像ファイルを1つも使わずに豊かで現代的な背景を作る方法です。

アクセシビリティ：グラデーションの上のテキスト

グラデーションの危うさは、テキストの真下にあります。コントラストはグラデーションの一端では申し分なくても、もう一端ではひどく不足することがあり、暗い部分の上では読める見出しも明るい部分の上では消えてしまうかもしれません。平均ではなく、必ず最悪のケースの領域を確認してください。確実な対処法は、半透明の単色のスクリム、あるいは暗い色から透明への専用グラデーションを、にぎやかな背景とテキストの間に置いて、どこでもコントラスト比が安全に保たれるようにすることです。明るいテキストの下では最も明るい点を、暗いテキストの下では最も暗い点を、実際に満たさなければならない値として扱いましょう。