design WEB 作りたい

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

近未来的でスタイリッシュな印象を与えるグラデーションデザイン

画像やJavaScriptは使わず、CSSだけで美しいグラデーションを実装する方法をご紹介します。

関連【色数別】オンラインデザイン配色ツール
関連CSSでリンクタグの色や下線の設定変更

CSSでグラデーション実装

グラデーションはlinear-gradientプロパティを使って指定します。

上の色#00dbde(水色)→下の色#fc00ff(ピンク)の順で、「,(コロン)」で区切って記述していきます。

See the Pen Untitled by daruma108@ひゃくやっつブログ (@daruma108) on CodePen.

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種類を集めたコレクションサイトです。

WebGradients
https://webgradients.com/

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

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

また、右上のダウンロードボタンからPNG形式の大きなグラデーション画像をダウンロードすることができ、カラーコードも記述してくれています。

すごく親切!

daruma108

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

WEB上の配色ツールをご紹介!

Check!
配色ツールおすすめタイトル画像
【色数別】オンラインデザイン配色ツールのご紹介

続きを見る

まとめ:CSSだけでグラデーション実装

cssだけでborder、background要素に簡単にグラデーションを実装できる方法をまとめてみました。

ウェブ制作にどんどんグラデーションを取り入れていきましょう!

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

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

続きを見る

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

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

無料のシルエット素材サイト5選!人物や街並みも【商用フリー】

design 作りたい

2022/9/3

無料のシルエット素材サイト5選!人物や街並みも【商用フ...

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

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

design 作りたい

2022/1/2

Adobe Stockに高品質な無料素材があるって知っ...

イラレで好きなエリア内に文字を敷き詰める表現方法【Illustrator】

design 作りたい

2022/9/13

イラレで好きなエリア内に文字を敷き詰める表現方法【Il...

design WEB 作りたい

2022/9/3

【無料】背景が透明なイラスト素材サイト【透過PNG素材...

-design, WEB, 作りたい
-, ,