Skip to content
Musterli

Stripes

Candy Stripes CSS pattern

Two colors with narrow gaps, like a candy cane.

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: #fff1f2;
background-image: repeating-linear-gradient(135deg, #e11d48 0px 7.5px, transparent 8.5px 11.5px, #1d4ed8 12.5px 27.5px, transparent 28.5px 31.5px, #e11d48 32.5px 40px);
background-size: 100% 100%;
background-position: 0 0;

Tailwind

bg-[#fff1f2] [background-image:repeating-linear-gradient(135deg,_#e11d48_0px_7.5px,_transparent_8.5px_11.5px,_#1d4ed8_12.5px_27.5px,_transparent_28.5px_31.5px,_#e11d48_32.5px_40px)] [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

  • 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

  • Barcode

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

    Stripes