コピペで簡単 CSS で作る綺麗なグラデーションをまとめて紹介

CSS で作る綺麗なグラデーションをまとめて紹介します。
例えば、グラデーションをデザインのアクセントに使いたい時に便利な方法です。

  1. グラデーションの方向を変更する
  2. 赤や黄がキーカラーの暖色系
  3. 青や緑がキーカラーの寒色系

グラデーションの方向を変更する

ここで紹介するグラデーションの方向は、左から右方向に設定されています。
グラデーションの方向を変更する場合は、linear-gradient の値を次のように変更してください。

左から右へ
to right
left(moz,webkit)
上から下へ
to bottom
top(moz,webkit)
左上から右下
to bottom
top(moz,webkit)
左上から右下
135deg
-45deg(moz,webkit)
左下から右上
45deg
45deg(moz,webkit)
円形
ellipse at center
center(moz,webkit)

右から左へ、下から上へなどとしたい場合は、指定している色を入れ替えてください。

赤や黄がキーカラーの暖色系

CSSとSCSS(SASS)はこちら。

background: #d62547;
background: -moz-linear-gradient(left, #d62547 0%, #ff720b 100%);
background: -webkit-linear-gradient(left, #d62547 0%,#ff720b 100%);
background: linear-gradient(to right, #d62547 0%,#ff720b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d62547', endColorstr='#ff720b',GradientType=1 );
background-color: #d62547;
@include filter-gradient(#d62547, #ff720b, horizontal);
@include background-image(linear-gradient(left, #d62547 0%,#ff720b 100%));

CSSとSCSS(SASS)はこちら。

background: #fcea86;
background: -moz-linear-gradient(left, #fcea86 0%, #f61d52 100%);
background: -webkit-linear-gradient(left, #fcea86 0%,#f61d52 100%);
background: linear-gradient(to right, #fcea86 0%,#f61d52 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcea86', endColorstr='#f61d52',GradientType=1 );
background-color: #fcea86;
@include filter-gradient(#fcea86, #f61d52, horizontal);
@include background-image(linear-gradient(left, #fcea86 0%,#f61d52 100%));

CSSとSCSS(SASS)はこちら。

background: #FB987C;
background: -moz-linear-gradient(left, #FB987C 0%, #ED3033 100%);
background: -webkit-linear-gradient(left, #FB987C 0%,#ED3033 100%);
background: linear-gradient(to right, #FB987C 0%,#ED3033 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB987C', endColorstr='#ED3033',GradientType=1 );
background-color: #FB987C;
@include filter-gradient(#FB987C, #ED3033, horizontal);
@include background-image(linear-gradient(left, #FB987C 0%,#ED3033 100%));

CSSとSCSS(SASS)はこちら。

background: #E9DF8D;
background: -moz-linear-gradient(left, #E9DF8D 0%, #F35269 100%);
background: -webkit-linear-gradient(left, #E9DF8D 0%,#F35269 100%);
background: linear-gradient(to right, #E9DF8D 0%,#F35269 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9DF8D', endColorstr='#F35269',GradientType=1 );
background-color: #E9DF8D;
@include filter-gradient(#E9DF8D, #F35269, horizontal);
@include background-image(linear-gradient(left, #E9DF8D 0%,#F35269 100%));

CSSとSCSS(SASS)はこちら。

background: #C25FF7;
background: -moz-linear-gradient(left, #C25FF7 0%, #FCAF84 100%);
background: -webkit-linear-gradient(left, #C25FF7 0%,#FCAF84 100%);
background: linear-gradient(to right, #C25FF7 0%,#FCAF84 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C25FF7', endColorstr='#FCAF84',GradientType=1 );
background-color: #C25FF7;
@include filter-gradient(#C25FF7, #FCAF84, horizontal);
@include background-image(linear-gradient(left, #C25FF7 0%,#FCAF84 100%));

CSSとSCSS(SASS)はこちら。

background: #FCE53E;
background: -moz-linear-gradient(left, #FCE53E 0%, #F48B4B 100%);
background: -webkit-linear-gradient(left, #FCE53E 0%,#F48B4B 100%);
background: linear-gradient(to right, #FCE53E 0%,#F48B4B 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCE53E', endColorstr='#F48B4B',GradientType=1 );
background-color: #FCE53E;
@include filter-gradient(#FCE53E, #F48B4B, horizontal);
@include background-image(linear-gradient(left, #FCE53E 0%,#F48B4B 100%));

青や緑がキーカラーの寒色系

CSSとSCSS(SASS)はこちら。

background: #99fcff;
background: -moz-linear-gradient(left, #99fcff 0%, #fff56b 100%);
background: -webkit-linear-gradient(left, #99fcff 0%,#fff56b 100%);
background: linear-gradient(to right, #99fcff 0%,#fff56b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99fcff', endColorstr='#fff56b',GradientType=1 );
background-color: #99fcff;
@include filter-gradient(#99fcff, #fff56b, horizontal);
@include background-image(linear-gradient(left, #99fcff 0%,#fff56b 100%));

CSSとSCSS(SASS)はこちら。

background: #eaff00;
background: -moz-linear-gradient(left, #eaff00 0%, #7afa8b 100%);
background: -webkit-linear-gradient(left, #eaff00 0%,#7afa8b 100%);
background: linear-gradient(to right, #eaff00 0%,#7afa8b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaff00', endColorstr='#7afa8b',GradientType=1 );
background-color: #eaff00;
@include filter-gradient(#eaff00, #7afa8b, horizontal);
@include background-image(linear-gradient(left, #eaff00 0%,#7afa8b 100%));

CSSとSCSS(SASS)はこちら。

background: #0e405a;
background: -moz-linear-gradient(left, #0e405a 0%, #30d2be 100%);
background: -webkit-linear-gradient(left, #0e405a 0%,#30d2be 100%);
background: linear-gradient(to right, #0e405a 0%,#30d2be 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e405a', endColorstr='#30d2be',GradientType=1 );
background-color: #0e405a;
@include filter-gradient(#0e405a, #30d2be, horizontal);
@include background-image(linear-gradient(left, #0e405a 0%,#30d2be 100%));

CSSとSCSS(SASS)はこちら。

background: #ef53ce;
background: -moz-linear-gradient(left, #ef53ce 0%, #30d2be 100%);
background: -webkit-linear-gradient(left, #ef53ce 0%,#30d2be 100%);
background: linear-gradient(to right, #ef53ce 0%,#30d2be 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef53ce', endColorstr='#30d2be',GradientType=1 );
background-color: #ef53ce;
@include filter-gradient(#ef53ce, #30d2be, horizontal);
@include background-image(linear-gradient(left, #ef53ce 0%,#30d2be 100%));

CSSとSCSS(SASS)はこちら。

background: #ef53ce;
background: -moz-linear-gradient(left, #ef53ce 0%, #3115e0 100%);
background: -webkit-linear-gradient(left, #ef53ce 0%,#3115e0 100%);
background: linear-gradient(to right, #ef53ce 0%,#3115e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef53ce', endColorstr='#3115e0',GradientType=1 );
background-color: #ef53ce;
@include filter-gradient(#ef53ce, #3115e0, horizontal);
@include background-image(linear-gradient(left, #ef53ce 0%,#3115e0 100%));

CSSとSCSS(SASS)はこちら。

background: #6affda;
background: -moz-linear-gradient(left, #6affda 0%, #6950ff 100%);
background: -webkit-linear-gradient(left, #6affda 0%,#6950ff 100%);
background: linear-gradient(to right, #6affda 0%,#6950ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6affda', endColorstr='#6950ff',GradientType=1 );
background-color: #6affda;
@include filter-gradient(#6affda, #6950ff, horizontal);
@include background-image(linear-gradient(left, #6affda 0%,#6950ff 100%));

CSSとSCSS(SASS)はこちら。

background: #3C58F9;
background: -moz-linear-gradient(left, #3C58F9 0%, #44C5A6 100%);
background: -webkit-linear-gradient(left, #3C58F9 0%,#44C5A6 100%);
background: linear-gradient(to right, #3C58F9 0%,#44C5A6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3C58F9', endColorstr='#44C5A6',GradientType=1 );
background-color: #3C58F9;
@include filter-gradient(#3C58F9, #44C5A6, horizontal);
@include background-image(linear-gradient(left, #3C58F9 0%,#44C5A6 100%));

CSSとSCSS(SASS)はこちら。

background: #2995F6;
background: -moz-linear-gradient(left, #2995F6 0%, #CEE34B 100%);
background: -webkit-linear-gradient(left, #2995F6 0%,#CEE34B 100%);
background: linear-gradient(to right, #2995F6 0%,#CEE34B 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2995F6', endColorstr='#CEE34B',GradientType=1 );
background-color: #2995F6;
@include filter-gradient(#2995F6, #CEE34B, horizontal);
@include background-image(linear-gradient(left, #2995F6 0%,#CEE34B 100%));

CSSとSCSS(SASS)はこちら。

background: #42C75E;
background: -moz-linear-gradient(left, #42C75E 0%, #7EBCED 100%);
background: -webkit-linear-gradient(left, #42C75E 0%,#7EBCED 100%);
background: linear-gradient(to right, #42C75E 0%,#7EBCED 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42C75E', endColorstr='#7EBCED',GradientType=1 );
background-color: #42C75E;
@include filter-gradient(#42C75E, #7EBCED, horizontal);
@include background-image(linear-gradient(left, #42C75E 0%,#7EBCED 100%));

まとめ

CSS で作る綺麗なグラデーション一覧まとめを紹介しました。