グラデーションの指定

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

.gradient-border {
	border-bottom: 4px solid #0af;
	border-image: linear-gradient(to right, #0af 0%, #6f0 100%);
	border-image-slice: 1;
	}

<input type="submit" class="ghost-btn" name="submit" value="Ghost Button Submit">
<input type="reset" class="ghost-btn" name="reset" value="Ghost Button Reset">

input[class|="ghost-btn"] {
	margin: 1rem;
	padding: 1rem 2rem;
	border-radius: 0;
	color: #666;
	}
input[type=submit].ghost-btn {
	border: 2px solid #0cb0e0;
	border-image: linear-gradient(to right, #0cb0e0 0%, #adff2f 100%);
	border-image-slice: 1;
	}
input[type=submit].ghost-btn:hover {
	background: #e0ffff;
	}

input[type=reset].ghost-btn {
	border: 2px solid #c21500;
	border-image: linear-gradient(to right, #c21500 0%, #ffc500 100%);
	border-image-slice: 1;
	}
input[type=reset].ghost-btn:hover {
	background: #f9cab0;
	}

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga reprehenderit architecto

<p class="gradient-text">Lorem ipsum dol.........nderit architecto</p>

.gradient-text {
	font-size: 2rem;
	font-weight: bold;
	background: -webkit-linear-gradient(0deg, #0af, #6f0);
	color: #0af;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

共通： 基本のBOX

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

div[class|="gradient"] {
	width: 100%;
	height: 100px;
	padding: 1rem;
	border: 1px #ccc solid;
	color: #fff;
	font-weight: bold;
	display: flex;
	align-items: center;
	}
.gradient-XX { background: #efefef; }

上下のグラデーション

.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 {
    background: url(path/to/stripe.png);
    }
.gradient-05 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-05a {
	background: repeating-linear-gradient(to top, #005e9b, #005e9b 2px, #fff 2px, #fff 6px);
    }
.gradient-05a 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);
	}