【コピペのみ】CSSだけでおしゃれなグラデーション実装まとめ【WEB制作】

デザインのトレンドとして数年前から再流行しているグラデーション。
CSSだけで実装する方法を、自分の備忘録としてまとめてみました。
もう画像なんて使わなくて大丈夫！

borderプロパティにグラデーション！

文字の下線やボタンの枠線などにグラデーションを設定！

sample：見出しの下線に

見出しの下線に

css

#gradation1 {
　　font-size: 24px;
　　padding-bottom: 5px;
　　border-bottom: 3px solid;
　　border-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
　　border-image-slice: 1;
}

html

<span id="gradation1">見出しの下線に</span>

文字のサイズなどはお好みで調整してください。

sample：ボタンなどの枠線にも

ボタンなどの枠線にも

css

#gradation2 {
　　font-size: 24px;
　　padding-top: 10px;
　　padding-bottom: 10px;
　　padding-left: 40px;
　　padding-right: 40px;
　　border: 3px solid;
　　border-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
　　border-image-slice: 1;
}
	

html

<span id="gradation2">ボタンなどの枠線にも</span>

色味の調整

border-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
のカラーコードを変更すればお好みのグラデーションに変更でき、
0%から100％の数値で、その色の強さを調整できます。

色味の調整

css

#gradation3 {
   font-size: 24px;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 40px;
   padding-right: 40px;
   border: 3px solid;
   border-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%);
   border-image-slice: 1;
}

html

<span id="gradation3">色味の調整</span>

ウィンドウのフチにも簡単にグラデーション！

最近のトレンドとしてよく見かけるウィンドウ全体に枠線があるサイト。
その枠線にもcssでグラデーションにすることも可能です。

body {
  margin: 0px;
  padding: 0px;
　background-color: #000;	
　border: 10px solid;
　border-image: linear-gradient(to right, #00dbde 0%, #fc00ff 120%);
　border-image-slice: 1;	
}

デモ

参考サイト
https://junjun-web.net/css/css-border-bottom-gradation/

背景（background-color）にもグラデーション！

線だけでなく、もちろん背景色にもグラデーションを適用させることは可能です。

背景色にも

css

#gradation4 {
  color: #fff;
  font-size: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: 40px;
  background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}

html

<span id="gradation4">背景色にも</span>

グラデーションサンプル！

グラデーションのカラーサンプルを集めたサイトはいくつかありますが、
おすすめは「WebGradients」というサイトです。こちらはウェブやデザイン制作で活用できるグラデーションパターンを180種類を集めたコレクションサイトです。
デザインの配色に悩んだ時にも使えるサイトだと思います。

あわせて読みたい！

【色数別】オンラインデザイン配色ツールのご紹介

続きを見る

お気に入りの配色のグラデーションが見つかったら、
右下の「Copy CSS」ボタンからCSSコードがコピーできます。

background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);

また、右上のダウンロードボタンからPNG形式の大きなグラデーション画像をダウンロードすることができ、左下にはカラーコードを記述してくれており、すごく親切ですね。

自分で上手にグラデーションが作れない時は、潔くコピーさせて頂きましょう！

まとめ

いかがでしたでしょうか。cssだけでborder、background要素に簡単にグラデーションを実装できる方法をまとめてみました。ウェブ制作にどんどんグラデーションを取り入れて行きたいと思います。
ありがとうございました。

「Adobe Stock（アドビストック）」の高品質な無料素材のダウンロード方法をご紹介！

Check!

Adobe Stockに高品質な無料素材があるって知ってた？ダウンロード方法も紹介！

続きを見る

ファイル形式ごとの素材サイトも紹介しています！

PNG素材背景が透明なイラスト素材サイト
Gif素材無料のアニメーションGifがダウンロードできるサイト