背景グラデーションの指定

共通： 基本のBOX

<div class="gradient-XX">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

線形 グラデーション

楕円形グラデーション

楕円形グラデーション2

正円形グラデーション

//線形	
.gradient-linear { background: linear-gradient(black, white);}

					background: linear-gradient(to bottom right, black, white); … 方向を指定
					background: linear-gradient(45deg, black, white); … 角度を指定（マイナス値もOK）

//楕円形
.gradient-ellipse { background: radial-gradient(250px 150px, white, black); } // (横 縦, 開始色 終了色)
.gradient-ellipse2 { background: radial-gradient(ellipse at center, black 0%, white 70%); }

//正円形
.gradient-circle { background: radial-gradient(circle, white, black); }

上下の線形グラデーション

.gradient-01 {
	background: linear-gradient(to bottom, #6f0,#0af);
	}

左右のグラデーション

.gradient-02 {
    background: linear-gradient(to right, #6f0, #0af);
    }

グラデーションの途中に色を追加

.gradient-03 {
    background: linear-gradient(to right, #6f0, #ff0 30%, #f0f 60%, #0af);
    }

グラデーションの途中に色を幅指定で追加

.gradient-04 {
    background: linear-gradient(to right, #6f0, #ff0 80%, #f0f 90%, #0af);
    }

グラデーションを透過する（背景画像ver.）

.gradient-05-img {
    background: url(path/to/stripe.png);
    }
.gradient-05-img p  {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to right, rgba(0,170,255,0.8),rgba(102,255,0,0.5));
    }

グラデーションを透過する（CSSストライプver.）

.gradient-05-css {
	background: repeating-linear-gradient(to top, #005e9b, #005e9b 2px, #fff 2px, #fff 6px);
    }
.gradient-05-css p  {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to right, rgba(0,170,255,0.8),rgba(102,255,0,0.5));
    }

左右のグラデーション

.gradient-06 {
	background: linear-gradient(to right, #ab8820, #decd1f, #f2e66d, #decd1f, #ab8820);
	}

上下のグラデーション

.gradient-07 {
	background: linear-gradient(to bottom, #c86edf,#e4b7f0);
	}

上下のグラデーション

.gradient-08 {
	background: linear-gradient(to bottom, #55efcb,#5bcaff);
	}