Stripes
Plaid CSS pattern
Wide and narrow stripes in two colors, crossed like woven tartan.
Customize in the editorChange colors, size and opacity, then export as CSS, SVG or PNG.
Code
Paste the lines into your element's rule. The pattern repeats by itself and adapts to any size.
CSS
background-color: #ecfdf5;
background-image: repeating-linear-gradient(0deg, #04785780 0px 24px, transparent 24px 36px, #f59e0bcc 36px 40px, transparent 40px 44px, #f59e0bcc 44px 48px, transparent 48px 60px, #0478574d 60px 68px, transparent 68px 80px), repeating-linear-gradient(90deg, #04785780 0px 24px, transparent 24px 36px, #f59e0bcc 36px 40px, transparent 40px 44px, #f59e0bcc 44px 48px, transparent 48px 60px, #0478574d 60px 68px, transparent 68px 80px);
background-size: 100% 100%, 100% 100%;
background-position: 0 0, 0 0;Tailwind
bg-[#ecfdf5] [background-image:repeating-linear-gradient(0deg,_#04785780_0px_24px,_transparent_24px_36px,_#f59e0bcc_36px_40px,_transparent_40px_44px,_#f59e0bcc_44px_48px,_transparent_48px_60px,_#0478574d_60px_68px,_transparent_68px_80px),_repeating-linear-gradient(90deg,_#04785780_0px_24px,_transparent_24px_36px,_#f59e0bcc_36px_40px,_transparent_40px_44px,_#f59e0bcc_44px_48px,_transparent_48px_60px,_#0478574d_60px_68px,_transparent_68px_80px)] [background-size:100%_100%,_100%_100%] [background-position:0_0,_0_0]How to use this pattern
Copy the CSS into the rule of the element that should carry the pattern, for example a section, a card or the body. The colors are hex values in the code and can be swapped directly. In the editor you change everything with sliders and can also export the pattern as SVG or PNG.