Core Code
Core Code Modern Dev Handbook

Repeating Gradient

Repeating gradients create repeating color patterns.

Preview

Code

<style>
.box{
width:180px;
height:100px;
background:repeating-linear-gradient(
45deg,
#2563eb,
#2563eb 10px,
#22c55e 10px,
#22c55e 20px
);
}
</style>

<div class="box"></div>

More CSS Gradients Examples (8)

example Linear Gradient Basic open example example Linear Gradient Direction open example example Linear Gradient Multiple Colors open example example Radial Gradient open example example Radial Gradient Position open example example Conic Gradient open example example Gradient Overlay open example example Gradient Text open example