How to create striped background in CSS

Striped background is quite easy to do in CSS, especially nowadays as browsers have a good support for CSS-Gradients these days. Here is how to create a striped background in CSS only and not using an image.

Just create a section in HTML with an id or class and target it in CSS by the id or class you gave it and apply the following CSS property on it.

.gradient-stripes {
	background-image: repeating-linear-gradient(135deg, #ccc, #ccc 10px, #eee 10px, #eee 20px);
}

Here we use repeating-linear-gradient to achieve the striped background and we use 135deg for the angle and then we starts with a color #ccc and then we stop the #ccc at 10px width and then we start another color #eee at 10px and ends the same color #eee on 20px and when it repeats itself it gives us a look of beautiful looking stripes.

We are not only confined at linear gradients and we can also have circular or radial gradients as well and it’s also not difficult and different from the linear gradient above. Just use the following code for circular or radial striped background.

.radial-gradient{
	background-image: repeating-radial-gradient(circle, #ccc, #ccc 10px, #eee 10px, #eee 20px);
}

It’s basically the same just use repeating-radial-gradient instead of repeating-linear-gradient and use circle instead of angle or degree.