2017/08/08

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

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

『ホームページ欲しいけど、WEB制作会社やフリーランスに頼むには予算が、、』と思って、自分でホームページ制作したい方へ、コピペでグラデーションを作れます！

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

グラデーション部分をクリックしてそのまま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 GeneratorやGrabientと言うサイトを利用するのも良いでしょう。

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

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

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

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

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

共有:

関連記事

#3【 PhotoShop 】サクッと写真加工!オックスクリ...

アイコンデザイン第2弾をyoutubeにて公開しました。-#...

いまだにmeta keywordsを設定したがるクライアント

お問い合わせ CONTACT