CSSでグラデーションを付ける方法。（linear-gradient）の使い方

より実践的なCSSグラデーションのテクニック

以上が基本的なCSSでのグラデーションの使い方ですが、ここからはより実践的なテクニックをご紹介していきます。
　　

1. グラデーションでオーバーレイをかける

CSSを使って、画像に薄いオーバーレイをかける方法があります。画像にオーバーレイをかける方法は非常に簡単で、「background」プロパティの「linear-gradient」部分の色にrbga()関数を使用した透過配色を使用し、url()関数で画像のURLを指定すればいいのです。

.overlay {
　　background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)),    url(https://bg.jpg);
}

上の例では2色になっていますが、もちろんこれらの色は何色も追加することができます。Photoshopで編集するよりも簡単にノスタルジックな画像ができ上がるので、ぜひこのテクニックをホームページに取り入れてみてはいかがでしょうか。
　　

2. テキストにグラデーションをかける

CSSのテキストにグラデーションをかける方法は、全てのブラウザで完璧に実装されているわけではありません。しかし、「background-clip」（もしくはベンダープレフィックスを使った「-webkit-background-clip」）プロパティを使うことで、背景から前景を除いた部分を表示することが可能になります。

h1 {
　　background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
　　-webkit-background-clip: text;
　　background-clip: text;
　　color: transparent;
}

ここで重要なのは、テキストの色自体には「transparent」(透明色)を指定しておくことです。これがないと、前景が邪魔になってグラデーションが上手く表示されなくなってしまうので、注意しましょう。
　　

3. ボーダーにグラデーションをかける

最近ではボーダーだけで背景がくりぬかれた「ゴーストボタン」をよく見かけますが、中にはボーダー部分にだけグラデーションがかかっているものを見たことはありませんか？

これを実装するには、3段階のステップを踏む必要があります。まず、透明な「border」を用意しながら、「border-image」でグラデーションを指定します。最後に、ボーダーで囲まれた中央部分を非表示にすることで完成します。

具体的には、以下のソースで完成します。

.box {
　　border: 5px solid transparent;
　　border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d);
　　border-image-slice: 1;
}

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。