CSSでのグラデーションの記法

最近はほとんどのブラウザでベンダープレフィックスが不要になったので、書くのが随分楽になりましたね。

グラデーションで使う個別の色の指定について記事書きました。

線形グラデーション

css

/* background: linear-gradient(最初の色,2番目の色); */
background:linear-gradient(#F89174, #FFC778);

「#F89174」のようなHEX以外に、色名（例：red）やRGBでも指定可能です。

グラデーションの方向の指定

css

/* to bottom 上から下へ (to bottomは省略可能) */
background: linear-gradient(to bottom,#29A2C6,#FFCB18); 
   
/* to top 下から上へ */
background: linear-gradient(to top,#29A2C6,#FFCB18);
   
/* to right 左から右へ */
background: linear-gradient(to right,#29A2C6,#FFCB18);　
   
/* to left 右から左へ */
background: linear-gradient(to left,#29A2C6,#FFCB18);　

多色グラデーション

css

/* 3色のグラデーション */
background:linear-gradient(#29A2C6,#FFCB18,#73B66B); 
 
/* 4色のグラデーション */
background:linear-gradient(#29A2C6,#FFCB18,#73B66B,#FF6D31);

色が変わる位置の指定

色コードの次に、半角スペースで区切って指定します。

%以外の単位も使用可能です。
CSSの単位について記事書きました。

css

 /* background:linear-gradient(色1 位置指定,色2 位置指定); */
 background:linear-gradient(#29A2C6 20%,#FFCB18 80%);

未指定省略時の位置

グラデーション全体の色数	1色目	2色目	3色目	4色目
2	0%	100%	-	-
3	0%	50%	100%	-
4	0%	33.3...%	66.6...%	100%

角度

斜め(45度)

css

/* 左上から右下へ */
background: linear-gradient(to bottom right, #29A2C6, #FFCB18);
  
/* 右上から左下へ */
background: linear-gradient(to bottom left, #29A2C6, #FFCB18);
 
/* 左下から右上へ */
background: linear-gradient(to top right, #29A2C6, #FFCB18);
 
/* 右下から左上へ */
background: linear-gradient(to top left, #29A2C6, #FFCB18);

斜め(角度を指定)

css

/* background: linear-gradient( 角度 , 色1 , 色2); */
background: linear-gradient(25deg, #29A2C6, #FFCB18); 

deg	方向
0deg	下から上へ
45deg	左下から右上へ
90deg	左から右へ
180deg	上から下へ

円形グラデーション

css

/* background: radial-gradient(中心の色, 外側の色); */
background: radial-gradient(#29A2C6, #FFCB18); 

※線形グラデーションと同様に、多色、変更位置の指定が可能です。

透明を使ったグラデーション

グラデーションには、透明(transparent)や半透明(rgba(255,109,49,0.5))なども指定可能です。

css

background: linear-gradient(#29A2C6, rgba(255,109,49,0.5));

背景画像を使ったグラデーション

色の指定の後にカンマ区切りでurl(画像のパス)を指定をします。
背景画像が見えるように、透明か、半透明を指定します。

css

 /* background: linear-gradient(半透明色1, 半透明色2) ,url(画像のパス); */
 background: linear-gradient(30deg, rgba(115,182,107,0.5), rgba(255,109,49,0.5)),url(img/image.jpg);

必要に応じて、background-sizeで調整をします。

グラデーションのアニメーション

css

body{
  background: linear-gradient(45deg, #29A2C6, #FFCB18, #73B66B);
  background-size: 500% 500%;
  animation: gradientAnim 20s ease infinite;
}
 
@keyframes gradientAnim {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

グラデーション関係のWebサービス

ジェネレータ

shade
Blend
CSS Gradient Animator
Ultimate CSS Gradient Generator
CSS Matic Gradient Generator
CSS Gradient
GradPad

コレクション

WebGradients
uiGradients
Gradient Magic
Grabient
Gradients Cards
Gradient Hunt