今回は、CSSでグラデーションを作成する方法をいくつか紹介します。CSSのプロパティとカラーコードの指定の仕方や値に関してを詳しく書いていきます。また最後にはコピペ用の見本デザインも用意していますので良かったら参考にして下さい。
グラデーションに関してを理解するには、CSSのカラーコードに関しての知識は必須になります。イマイチ分かってない方は下記の記事でカラーコードについての理解をしましょう。
グラデーションの基本的な書き方
グラデーションを作成するにはCSSの「background」の値に「linear-gradient(方向, 色1, 色2, 色3, 色4, …)」を付けることで可能です。
「方向」は「数値deg」で角度を指定します。0は水平、90は垂直、180で反転です。
「色」はカラーコードを指定します。カラーに関しては16進数でも8進数でもなんでも可能です。
下記の記述の場合、45度の角度でホワイト〜ネイビーに徐々に変わっていくグラデーションです。
linear-gradient (45deg, white, navy); （実際の見た目は下記。）
値を「radial-gradient」にする事で円状のグラデーションが作成可能です。
円状の場合は「方向」の指定は入りませんが、その代わりに開始地点を指定する事ができます。
下記の記述の場合、左から100px、上から50pxの位置が中心点でホワイト〜ネイビーに徐々に変わっていくグラデーションです。
radial-gradient (at 100px 50px, white, navy); （実際の見た目は下記。）
更に値を「repeating-linear-gradient」「repeating-radial-gradient」にする事で繰り返し（リピート）が可能です。
グラデーションの説明は以上です。
グラデーションの例色々（コピペでOK）
以下では様々なグラデーションのパターンを作ってみました。全てコピペで使ってもらってOKです。
初心者の方でもコピペのみで使用出来るようにHTML内にstyleを記述しています。リテラシーのある方はstyle部分だけ上手く使って下さい。
通常グラデーション1
縦ラインで横に行くほど濃くなっていく。
<div class="gr1"></div>
<style>
.gr1 {
display: inline-block;
padding: 10em 10em;
background: linear-gradient(90deg, #ffead5, #ff8000);
}
</style>通常グラデーション2
斜めにグラデーション。
<div class="gr2"></div>
<style>
.gr2 {
display: inline-block;
padding: 10em 10em;
background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
}
</style>
通常グラデーション3
3色のグラデーション。
<div class="gr3">
</div>
<style>
.gr3 {
position: relative;
display: inline-block;
padding: 10em 10em;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}
.gr3:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 20%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
</style>円状グラデーション1
円の中心に行く程薄くなっていく様に。
<div class="gr4"></div>
<style>
.gr4 {
display: inline-block;
padding: 10em 10em;
background-image: radial-gradient(#eae9f5 1%, #8c81d6 25%, #130cb7 70%, #0802a6 100%);
}
</style>円状グラデーション2
少し中心をズラして艶感を演出。
<div class="gr5"></div>
<style>
.gr5{
display: inline-block;
background-color: #333;
background-image: -webkit-radial-gradient(at 100px 50px, #ddd, #333);
background-image: radial-gradient(at 100px 50px, #ddd, #333);
padding: 10em 10em;
line-height: 300px;
text-align: center;
color: #fff;
}
</style>繰り返し1
線状の繰り返し。
<div class="gr6"></div>
<style>
.gr6 {
display: inline-block;
padding: 10em 10em;
background: repeating-linear-gradient(90deg, #f0f0f0 20px, #303030 40px);
}
</style>繰り返し2
斜めに繰り返し。
<div class="gr7"></div>
<style>
.gr7 {
display: inline-block;
padding: 10em 10em;
background: repeating-linear-gradient(135deg, rgba(42, 110, 0, .8) 30px, rgba(81, 181, 20, .8) 40px, rgba(124, 219, 66, .8) 50px, rgba(162, 235, 117, .8) 60px, rgba(205, 255, 173, .8) 70px, rgba(236, 255, 224, .8) 80px);
}
</style>繰り返し3
円状の繰り返し。
<div class="gr8"></div>
<style>
.gr8 {
display: inline-block;
padding: 10em 10em;
background: repeating-radial-gradient(circle farthest-side, #000000 7px, #474747 12px, #858282 17px, #bfbdbd 22px, #e8e6e6 28px, #ffffff 30px);
}
</style>背景に画像1
背景に画像を置いてグラデーションも。
<div class="gr9"></div>
<style>
.gr9 {
padding: 10em 10em;
display: inline-block;
background: linear-gradient(-45deg, rgba(88, 207, 251, .7), rgba(240, 255, 0, .7)) ,url(/wp-content/uploads/2019/04/8264.jpg);
background-size: cover;
}
</style>背景に画像2
背景画像+3色グラデーション。
<div class="gr10"></div>
<style>
.gr10 {
position: relative;
padding: 10em 10em;
display: inline-block;
background: linear-gradient(-45deg, rgba(250, 1, 109, .8), rgba(252, 207, 49, .8)) ,url(/wp-content/uploads/2019/04/EF962CC8-9C25-461D-941F-1DA8A1E11EC8.jpeg);
background-size: cover;
}
.gr10:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(15deg, rgba(250, 242, 1, .7), rgba(252, 207, 49, .7) 20%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
</style>以上が「CSSでグラデーションを作成する方法【コピペで使える】」でした。
少しでも参考になっていただけたら幸いです。今後も気分でパターンを増やしていきます。
デザイン見本まとめ
他のデザイン見本もいくつか用意しています。合わせてどうぞ。
