Skip to content
Musterli

Stripes

Barcode CSS pattern

Irregular lines like a barcode, decorative and not machine readable.

Customize in the editor

Change 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: #f1f5f9;
background-image: repeating-linear-gradient(90deg, #334155 0px 4px, transparent 4px 6px, #334155 6px 8px, transparent 8px 12px, #334155 12px 20px, transparent 20px 22px, #334155 22px 24px, transparent 24px 30px, #334155 30px 36px, transparent 36px 38px, #334155 38px 40px, transparent 40px 44px, #334155 44px 48px, transparent 48px 50px, #334155 50px 52px, transparent 52px 60px, #334155 60px 62px, transparent 62px 66px, #334155 66px 72px, transparent 72px 74px, #334155 74px 78px, transparent 78px 82px, #334155 82px 84px, transparent 84px 90px, #334155 90px 98px, transparent 98px 100px, #334155 100px 102px, transparent 102px 106px, #334155 106px 110px, transparent 110px 112px, #334155 112px 114px, transparent 114px 118px);
background-size: 100% 100%;
background-position: 0 0;

Tailwind

bg-[#f1f5f9] [background-image:repeating-linear-gradient(90deg,_#334155_0px_4px,_transparent_4px_6px,_#334155_6px_8px,_transparent_8px_12px,_#334155_12px_20px,_transparent_20px_22px,_#334155_22px_24px,_transparent_24px_30px,_#334155_30px_36px,_transparent_36px_38px,_#334155_38px_40px,_transparent_40px_44px,_#334155_44px_48px,_transparent_48px_50px,_#334155_50px_52px,_transparent_52px_60px,_#334155_60px_62px,_transparent_62px_66px,_#334155_66px_72px,_transparent_72px_74px,_#334155_74px_78px,_transparent_78px_82px,_#334155_82px_84px,_transparent_84px_90px,_#334155_90px_98px,_transparent_98px_100px,_#334155_100px_102px,_transparent_102px_106px,_#334155_106px_110px,_transparent_110px_112px,_#334155_112px_114px,_transparent_114px_118px)] [background-size:100%_100%] [background-position: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.

Related patterns

All CSS patterns

  • Stripes

    Wide stripes at any angle you like.

    Stripes

  • Candy Stripes

    Two colors with narrow gaps, like a candy cane.

    Stripes

  • Pinstripes

    Fine lines with lots of space, elegant and understated.

    Stripes

  • Gingham

    Translucent stripes in both directions create the classic check.

    Stripes

  • Plaid

    Wide and narrow stripes in two colors, crossed like woven tartan.

    Stripes