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

更新日: 2020年08月24日

マイページにお気に入り

グラデーション（gradient）とは、色や濃淡を連続した階調で表現することです。最近ではインスタグラムのロゴを始め、様々なところでグラデーションが多様されています。

確かに、色を単色で利用するよりも、グラデーションを使ったほうがより生き生きとした雰囲気を表現することができます。しかし、グラデーションをWeb技術で表現するときに、どのようにすればいいかご存知ですか？

そこで今回は、もう一度学び直したいCSSグラデーションの基礎についてまとめていきました。

グラデーション自体は以前から表現可能だったわけですが、ここで改めてその表現方法や応用例などをご紹介していきます。

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

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

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

資料をダウンロード

CSSでグラデーションを作成する方法

Webブラウザでグラデーションを表現できるようになったのはだいぶ前からですが、2016年を境にグラデーションに関する関心があらためて高まってきています。

グラデーションをCSSで作成することができなかった「不便な」時代には、グラデーションのスライス画像を作成して、「background」でグラデーション画像を指定することで「擬似的に」グラデーションを表現していましたが、現在ではCSSで簡単にグラデーションを表現できるようになっています。

「linear-gradient」と「radial-gradient」

最も簡単な形は、「background」に「linear-gradient」もしくは「radial-gradient」を指定することです。中でも、直線的にグラデーションを指定する「linear-gradient」が最も基本的な形としてよく使われます。

.wrap {
　　background: linear-gradient(#000046, #1cb5e0 );   
}

グラデーションの例

デフォルトでは、以下のように上から下に引くようになっています。

グラデーションの方向を決める

続いて、最初に方向を表す属性を色の前に付け加えることで、グラデーションの方向を決めることができます。

.wrap {
　　background: linear-gradient(to right , #000046, #1cb5e0 );   
}

グラデーションの例

上の図では、「to right」を指定することで右方向にまっすぐグラデーションを指定していきます。同様に、このパラメーターを「to top right」にすれば、右上に向かってグラデーションをかけることになります。これは、実際に「45deg」（45度）を指定するのと同じ状態になります。

3色以上のグラデーションを作る

グラデーションの使用は、2色にとどまりません。実際に、3色、4色……と付け加えていくことが可能です。

.wrap {
　　background: linear-gradient(to right, orange, deeppink, blueviolet, cyan);   
}

特定の幅のグラデーションを広く取る

また、グラデーションのある特定の色の幅を広く取ることもできます。その場合には、以下のようにパーセンテージを指定します。

.wrap {
　　background: linear-gradient(to right , #000046 80%, #1cb5e0 );   
}

グラデーションの例
　　

より実践的な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;
}

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

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

資料をダウンロード

CSSジェネレーターの活用で簡単にグラデーションを作成

ここまでCSSを自分で書いてグラデーションを作る方法を紹介してきました。慣れてしまえばなんてことのない作業ですが、CSSに慣れていない場合は少し難しく感じるかもしれません。そのような場合は下記のようなCSSジェネレーターでグラデーションを作ってみましょう。

shapyのキャプチャ
shapy

グラデーションさせたい色や形を指定すれば、自動的にCSSを生成してくれます。生成されたタグをWebサイトに貼り付けるだけで、簡単にグラデーションが作成できますよ。ぜひ活用してみてくださいね。　　

グラデーションを活用して、表現力豊かなWebサイト制作を

一口にグラデーションといっても、様々な発想によってどうにでも使い倒すことができそうです。画像にグラデーションのオーバーレイをかけたり、テキストにグラデーションをかけたりと、使い方次第で様々な応用もできます。

単色で使うよりも、グラデーションを使ったほうが、より表現力が豊かになるのは言うまでもありません。

ぜひ、グラデーションを使って、イマジネーションあふれるサイトを作成してみましょう。

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

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

資料をダウンロード

CSSの便利技

CSS

Webページを構築する際、テキストへの下線配置や矢印など、コンテンツをよりわかりやすくする工夫をしたくなるものです。CSSを使うと、簡単なコードを書くだけでテキストの装飾などが思いのままにできます。今回ご紹介するCSSの書き方は、コンテンツの中でユーザーに注目してほしいところを示せる便利なものです。矢印や三角の作り方など、この機会にチェックしてみてください。