CSS Visual Directory
Striped Background
Diagonal stripes drawn entirely with a repeating gradient — no image required.
Edit Striped Background
Change any value to see it update live.
About this entry
What it is
Diagonal stripes drawn entirely with a repeating gradient — no image required.
Empty states, construction and warning bands, and textured panels.
Copy & use
How to copy and use striped background
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Empty states, construction and warning bands, and textured panels.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Repeats a two-colour gradient at a fixed interval. Because each stop pair starts and ends at the same position, the transition is a hard edge rather than a blend.
45deg- Stripe angle. Ninety degrees gives vertical bars, zero gives horizontal.
#f4ede4 0 10px- First colour, from 0 to 10px — the double position is what makes the edge hard.
#e7dbcc 10px 20px- Second colour, picking up exactly where the first stopped.
Making it yours
How to adjust striped background
The second stop of one colour and the first of the next must be identical, or you get a gradient rather than a stripe. Change both numbers together to alter the stripe width.
Worth knowing before you ship it
Fine stripes shimmer badly when the element scrolls or scales. Keep them at least a few pixels wide, and avoid animating their position.
Common questions
Using striped background
What is striped background?
Diagonal stripes drawn entirely with a repeating gradient — no image required. Empty states, construction and warning bands, and textured panels.
Where do I put the striped background CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Empty states, construction and warning bands, and textured panels. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will striped background work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise striped background after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing