<ul class="box-list">
	<li class="px-1 mb-4">
		<p>linear-gradient（線形グラデーション／上から下・2色）</p>
		<div class="box gradient01">
		</div>
</li>
	<li class="w-full px-1 mb-4">
		<p>linear-gradient（線形グラデーション／左上→右下・6色）</p>
			<div class="box gradient02">
			</div>
		</li>
	<li class="w-full px-1 mb-4">
		<p>repeating-linear-gradient（反復線形グラデーション）</p>
			<div class="box gradient03">
			</div>
		</li>
	<li class="w-full px-1 mb-4">
		<p>radial-gradient（円形グラデーション）</p>
			<div class="box gradient04">
			</div>
		</li>
	<li class="w-full px-1 mb-4">
		<p>repeating-radial-gradient（反復円形グラデーション）</p>
			<div class="box gradient05">
			</div>
		</li>
	<li class="w-full px-1 mb-4">
		<p>radial-gradient（円錐形グラデーション）</p>
			<div class="box gradient06">
			</div>
		</li>
</ul>

.box-list {
	max-width: 80%;
	margin: 1rem auto;
}
.box {
	width: 100%;
	height: 200px;
}
.gradient01 {
	background: linear-gradient(#3051AE, #FFCC92);
}
.gradient02 {
	background: linear-gradient(135deg, #ff62b7, #ffb280 10%, #fffb75 40%, #85ff8d 60%, #80b1ff 90%, #bd7ed9);
}
.gradient03 {
	background: repeating-linear-gradient(#ff62b7, transparent 50px);
}
.gradient04 {
	background: radial-gradient(circle at 50% 50%, transparent 0%, #ADC9FA 15%, #3778A9 90%);
}
.gradient05 {
	background: repeating-radial-gradient(circle at 50% 50%, transparent 0%, #ADC9FA 5%, #3778A9 10%);
}
.gradient06 {
	background: conic-gradient(#ff62b7, #ffb280, #fffb75, #85ff8d, #80b1ff, #bd7ed9, #ff62b7);
}