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

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

borderプロパティにグラデーション！
ウィンドウのフチにも簡単にグラデーション！
背景（background-color）にもグラデーション！
- css
- html
グラデーションサンプル！
- まとめ

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種類を集めたコレクションサイトです。
デザインの配色に悩んだ時にも使えるサイトだと思います。

まとめ

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

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

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

sample：見出しの下線に

css

html

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

css

html

色味の調整

css

html

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

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

css

html

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

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

まとめ