CSS Background Stripes
This page contains CSS background stripes. These are CSS backgrounds that use linear-gradient()
or repeating-linear-gradient()
to create background stripes.
Horizontal Stripes using linear-gradient()
Here we use linear-gradient()
to acheive a striped effect.
Horizontal Stripes using repeating-linear-gradient()
This example uses repeating-linear-gradient()
to acheive a similar effect to the above example. We also use hexadecimal values instead of RGBA.
Horizontal Stripes
We use repeating-linear-gradient()
to create horizontal stripes. The only difference between horizontal and the vertical stripes is that we use 180deg
for horizontal and 90deg
for vertical.
Different Angles
Let's tweak the angle a bunch and see what happens…
Thin Stripes
Thick Stripes
More Colors
You can add more colors as you wish by adding the color and modifying the pixel amounts (to accommodate the three colors). In this example there are stripes in three different colors.