Striped Background CSS Generator

Create custom striped backgrounds with CSS using this free online generator.
Adjust the stripe colors, width, angle, spacing, and pattern while checking the result with a real-time preview.
Copy the generated CSS code and use it directly in your website or web project.

Customization

Reset

▼ Angle

deg

▼ Pattern

Drag to reorder

• Color:

  #06b6d4

  Width:

  px

• Color:

  transparent

  Width:

  px

Add

Preview

CSS Code

Copy Code

background-image: repeating-linear-gradient(45deg, #06b6d4, #06b6d4 10px, transparent 10px, transparent 20px);

Notes

• This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
• This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.