ホームページ・ロゴ・名刺の3点セットが全てコミコミ!
menu close

コピペでいけるCSSグラデーション! 綺麗&かわいいグラデーションカラーの一覧

 2017.08.08
 MASAKI

ウェブデザインやグラフィックデザインに利用できる綺麗&かわいいグラデーションカラーを25種類揃えました!

 

このグラデーションカラーを簡単にコピペする事ができます。

 

カラーコードも表示していますが、サイト構築の際に使用したい場合は、グラデーション部分をクリックしてそのままCSSに(Ctrl+V)で簡単に使用する事が出来ます。

 

  • #c8b1e9#a8ddd9
    background: #ff5db1;
    background: -moz-linear-gradient(top, #c8b1e9 0%, #a8ddd9 100%);
    background: -webkit-linear-gradient(top, #c8b1e9 0%,#a8ddd9 100%);
    background: linear-gradient(to bottom, #c8b1e9 0%,#a8ddd9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8b1e9', endColorstr='#a8ddd9',GradientType=0 );
    				
  • #ec38bc#fdeff9
    background: #ec38bc;
    background: -moz-linear-gradient(top, #ec38bc 0%, #fdeff9 100%);
    background: -webkit-linear-gradient(top, #ec38bc 0%,#fdeff9 100%);
    background: linear-gradient(to bottom, #ec38bc 0%,#fdeff9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec38bc', endColorstr='#fdeff9',GradientType=0 );
    				
  • #ff9966#ff5e62
    background: #ff9966;
    background: -moz-linear-gradient(top, #ff9966 0%, #ff5e62 100%);
    background: -webkit-linear-gradient(top, #ff9966 0%,#ff5e62 100%);
    background: linear-gradient(to bottom, #ff9966 0%,#ff5e62 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9966', endColorstr='#ff5e62',GradientType=0 );
    				
  • #7F00FF#E100FF
    background: #7F00FF;
    background: -moz-linear-gradient(top, #7F00FF 0%, #E100FF 100%);
    background: -webkit-linear-gradient(top, #7F00FF 0%,#E100FF 100%);
    background: linear-gradient(to bottom, #7F00FF 0%,#E100FF 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7F00FF', endColorstr='#E100FF',GradientType=0 );
    				
  • #C9D6FF#e2e2e2
    background: #C9D6FF;
    background: -moz-linear-gradient(top, #C9D6FF 0%, #e2e2e2 100%);
    background: -webkit-linear-gradient(top, #C9D6FF 0%,#e2e2e2 100%);
    background: linear-gradient(to bottom, #C9D6FF 0%,#e2e2e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9D6FF', endColorstr='#e2e2e2',GradientType=0 );
    				
  • #d9a7c7#fffcdc
    background: #d9a7c7;
    background: -moz-linear-gradient(top, #d9a7c7 0%, #fffcdc 100%);
    background: -webkit-linear-gradient(top, #d9a7c7 0%,#fffcdc 100%);
    background: linear-gradient(to bottom, #d9a7c7 0%,#fffcdc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9a7c7', endColorstr='#fffcdc',GradientType=0 );
    				
  • #0cebeb#20e3b2
    background: #0cebeb;
    background: -moz-linear-gradient(top, #0cebeb 0%, #20e3b2 100%);
    background: -webkit-linear-gradient(top, #0cebeb 0%,#20e3b2 100%);
    background: linear-gradient(to bottom, #0cebeb 0%,#20e3b2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0cebeb', endColorstr='#20e3b2',GradientType=0 );
    				
  • #1c92d2#f2fcfe
    background: #1c92d2;
    background: -moz-linear-gradient(top, #1c92d2 0%, #f2fcfe 100%);
    background: -webkit-linear-gradient(top, #1c92d2 0%,#f2fcfe 100%);
    background: linear-gradient(to bottom, #1c92d2 0%,#f2fcfe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c92d2', endColorstr='#f2fcfe',GradientType=0 );
    				
  • #c0cfcd#afecae
    background: #c0cfcd;
    background: -moz-linear-gradient(top, #c0cfcd 0%, #afecae 100%);
    background: -webkit-linear-gradient(top, #c0cfcd 0%,#afecae 100%);
    background: linear-gradient(to bottom, #c0cfcd 0%,#afecae 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0cfcd', endColorstr='#afecae',GradientType=0 );
    				
  • #4B79A1#283E51
    background: #4B79A1;
    background: -moz-linear-gradient(top, #4B79A1 0%, #283E51 100%);
    background: -webkit-linear-gradient(top, #4B79A1 0%,#283E51 100%);
    background: linear-gradient(to bottom, #4B79A1 0%,#283E51 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4B79A1', endColorstr='#283E51',GradientType=0 );
    				
  • #1e3c72#2a5298
    background: #1e3c72;
    background: -moz-linear-gradient(top, #1e3c72 0%, #2a5298 100%);
    background: -webkit-linear-gradient(top, #1e3c72 0%,#2a5298 100%);
    background: linear-gradient(to bottom, #1e3c72 0%,#2a5298 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e3c72', endColorstr='#2a5298',GradientType=0 );
    				
  • #fc00ff#00dbde
    background: #fc00ff;
    background: -moz-linear-gradient(top, #fc00ff 0%, #00dbde 100%);
    background: -webkit-linear-gradient(top, #fc00ff 0%,#00dbde 100%);
    background: linear-gradient(to bottom, #fc00ff 0%,#00dbde 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc00ff', endColorstr='#00dbde',GradientType=0 );
    				
  • #8e9eab#eef2f3
    background: #8e9eab;
    background: -moz-linear-gradient(top, #8e9eab 0%, #eef2f3 100%);
    background: -webkit-linear-gradient(top, #8e9eab 0%,#eef2f3 100%);
    background: linear-gradient(to bottom, #8e9eab 0%,#eef2f3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e9eab', endColorstr='#eef2f3',GradientType=0 );
    				
  • #6441A5#2a0845
    background: #6441A5;
    background: -moz-linear-gradient(top, #6441A5 0%, #2a0845 100%);
    background: -webkit-linear-gradient(top, #6441A5 0%,#2a0845 100%);
    background: linear-gradient(to bottom, #6441A5 0%,#2a0845 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6441A5', endColorstr='#2a0845',GradientType=0 );
    				
  • #AAFFA9#11FFBD
    background: #AAFFA9;
    background: -moz-linear-gradient(top, #AAFFA9 0%, #11FFBD 100%);
    background: -webkit-linear-gradient(top, #AAFFA9 0%,#11FFBD 100%);
    background: linear-gradient(to bottom, #AAFFA9 0%,#11FFBD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AAFFA9', endColorstr='#11FFBD',GradientType=0 );
    				
  • #FBD3E9#BB377D
    background: #FBD3E9;
    background: -moz-linear-gradient(top, #FBD3E9 0%, #BB377D 100%);
    background: -webkit-linear-gradient(top, #FBD3E9 0%,#BB377D 100%);
    background: linear-gradient(to bottom, #FBD3E9 0%,#BB377D 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBD3E9', endColorstr='#BB377D',GradientType=0 );
    				
  • #FF4E50#F9D423
    background: #FF4E50;
    background: -moz-linear-gradient(top, #FF4E50 0%, #F9D423 100%);
    background: -webkit-linear-gradient(top, #FF4E50 0%,#F9D423 100%);
    background: linear-gradient(to bottom, #FF4E50 0%,#F9D423 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF4E50', endColorstr='#F9D423',GradientType=0 );
    				
  • #fcbc93#f9abb7
    background: #fcbc93;
    background: -moz-linear-gradient(top, #fcbc93 0%, #f9abb7 100%);
    background: -webkit-linear-gradient(top, #fcbc93 0%,#f9abb7 100%);
    background: linear-gradient(to bottom, #fcbc93 0%,#f9abb7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcbc93', endColorstr='#f9abb7',GradientType=0 );
    				
  • #e52d27#b31217
    background: #e52d27;
    background: -moz-linear-gradient(top, #e52d27 0%, #b31217 100%);
    background: -webkit-linear-gradient(top, #e52d27 0%,#b31217 100%);
    background: linear-gradient(to bottom, #e52d27 0%,#b31217 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e52d27', endColorstr='#b31217',GradientType=0 );
    				
  • #7540d0#c97fb6
    background: #7540d0;
    background: -moz-linear-gradient(top, #7540d0 0%, #c97fb6 100%);
    background: -webkit-linear-gradient(top, #7540d0 0%,#c97fb6 100%);
    background: linear-gradient(to bottom, #7540d0 0%,#c97fb6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7540d0', endColorstr='#c97fb6',GradientType=0 );
    				
  • #f8b9bf#a2c3fa
    background: #f8b9bf;
    background: -moz-linear-gradient(top, #f8b9bf 0%, #a2c3fa 100%);
    background: -webkit-linear-gradient(top, #f8b9bf 0%,#a2c3fa 100%);
    background: linear-gradient(to bottom, #f8b9bf 0%,#a2c3fa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b9bf', endColorstr='#a2c3fa',GradientType=0 );
    				
  • #d9c7f4#f9f9d1
    background: #d9c7f4;
    background: -moz-linear-gradient(top, #d9c7f4 0%, #f9f9d1 100%);
    background: -webkit-linear-gradient(top, #d9c7f4 0%,#f9f9d1 100%);
    background: linear-gradient(to bottom, #d9c7f4 0%,#f9f9d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9c7f4', endColorstr='#f9f9d1',GradientType=0 );
    				
  • #1488CC#2B32B2
    background: #1488CC;
    background: -moz-linear-gradient(top, #1488CC 0%, #2B32B2 100%);
    background: -webkit-linear-gradient(top, #1488CC 0%,#2B32B2 100%);
    background: linear-gradient(to bottom, #1488CC 0%,#2B32B2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1488CC', endColorstr='#2B32B2',GradientType=0 );
    				
  • #00467F#A5CC82
    background: #00467F;
    background: -moz-linear-gradient(top, #00467F 0%, #A5CC82 100%);
    background: -webkit-linear-gradient(top, #00467F 0%,#A5CC82 100%);
    background: linear-gradient(to bottom, #00467F 0%,#A5CC82 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00467F', endColorstr='#A5CC82',GradientType=0 );
    				
  • #77A1D3#E684AE
    background: #77A1D3;
    background: -moz-linear-gradient(top, #77A1D3 0%, #E684AE 100%);
    background: -webkit-linear-gradient(top, #77A1D3 0%,#E684AE 100%);
    background: linear-gradient(to bottom, #77A1D3 0%,#E684AE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77A1D3', endColorstr='#E684AE',GradientType=0 );
    				

 

色の配色を調節しながらグラデーションを取得したい方へ

 

オリジナルのカラーを作成したい方は、Ultimate CSS Gradient GeneratorGrabientと言うサイトを利用するのも良いでしょう。

 

CSSジェネレーター

 

 

上記サイトは元々作られた配色があるほか、自分で配色を調整する事もできます。(CSSコードも取得可能)
2017年現在、独学でホームページを制作する方が以前より増加していると思います。そんな中で上記のようなジェネレーターサイトやコピペできる情報を掲載しているサイトなどを使って、最大の時間短縮とクオリティアップに繋があります。

 

CSSジェネレーターはフロントエンジニアの便利アイテムみたいな感じですね。
フロントエンジニアや独学でホームページを開設しようとされている方はぜひ活してみてはいかがでしょうか。

icon
MASAKI
フォトスタジオで約5年ほど写真の合成や自社広告制作を担当。その後はホームページ制作の学校に通い、HTMLの資格とイラストレーターの資格を取得。学校を卒業後、WEB制作会社に就職し大手クライアント様の案件を経験。そして個人事業主として独立。趣味は映画鑑賞・カー クルージング・バスケットボール・アメリカンカルチャーや洋楽が大好きです。