グラデーションの指定

<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);
    }

.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));
    }

.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);
	}