How do the stripes get hard edges instead of a fade?

Each color is written twice, ending at a position where the next color starts at the exact same distance. Two stops at one position make a sharp transition, and the whole pattern repeats every stripe plus gap.

What do 0 and 90 degrees look like?

A gradient at 0 degrees runs bottom to top, so its bands lie horizontally. At 90 degrees it runs left to right, giving vertical stripes. 45 and 135 give the two diagonal directions.

Can I use arbitrary angles?

This tool offers the four angles only. After copying, you can edit the number in front of deg to any value.

Does the gap have to be a different color?

It is the second color in the gradient, so set both colors the same if you only want to see the spacing pattern. The gap is the width of that second band.

Design toolsInstantPrivateNo account

CSS Stripe Generator

Create striped backgrounds with a single repeating-linear-gradient.

Back to category

About CSS stripe generator

Create striped backgrounds with a single repeating-linear-gradient. Choose two colors, the width of the stripe, the width of the gap and one of four angles, and the tool prints a ready-to-paste declaration. It replaces the tiny background images people used to tile for candy-stripe and barber-pole effects.

How to use it

Set Color 1 (stripe) and Color 2 (gap) with the color pickers.
Choose a Direction: 0, 45, 90 or 135 degrees.
Drag Stripe width from 2 to 100 pixels and Gap width from 0 to 100 pixels.
Copy the multi-line background declaration from Generated CSS.

Default diagonal stripes

Input

Blue #3b82f6 and white, 45 degrees, 20 px stripe, 20 px gap

Output

background: repeating-linear-gradient(
  45deg,
  #3b82f6,
  #3b82f6 20px,
  #ffffff 20px,
  #ffffff 40px
);

When to use it

Making a construction-tape style border with alternating yellow and dark bands.
Adding a subtle diagonal texture behind a pricing table header.
Drawing a progress bar with moving stripes as a base for a CSS animation.
Creating a zebra pattern for a loading placeholder.

Questions about CSS stripe generator

How do the stripes get hard edges instead of a fade?: Each color is written twice, ending at a position where the next color starts at the exact same distance. Two stops at one position make a sharp transition, and the whole pattern repeats every stripe plus gap.
What do 0 and 90 degrees look like?: A gradient at 0 degrees runs bottom to top, so its bands lie horizontally. At 90 degrees it runs left to right, giving vertical stripes. 45 and 135 give the two diagonal directions.
Can I use arbitrary angles?: This tool offers the four angles only. After copying, you can edit the number in front of deg to any value.
Does the gap have to be a different color?: It is the second color in the gradient, so set both colors the same if you only want to see the spacing pattern. The gap is the width of that second band.

Related tools

Design toolsInstantPrivateNo account

CSS Stripe Generator

Create striped backgrounds with a single repeating-linear-gradient.

Back to category

WorkbenchClient-side · Private

About CSS stripe generator

How to use it

Set Color 1 (stripe) and Color 2 (gap) with the color pickers.
Choose a Direction: 0, 45, 90 or 135 degrees.
Drag Stripe width from 2 to 100 pixels and Gap width from 0 to 100 pixels.
Copy the multi-line background declaration from Generated CSS.

Default diagonal stripes

Input

Blue #3b82f6 and white, 45 degrees, 20 px stripe, 20 px gap

Output

background: repeating-linear-gradient(
  45deg,
  #3b82f6,
  #3b82f6 20px,
  #ffffff 20px,
  #ffffff 40px
);

When to use it

Making a construction-tape style border with alternating yellow and dark bands.
Adding a subtle diagonal texture behind a pricing table header.
Drawing a progress bar with moving stripes as a base for a CSS animation.
Creating a zebra pattern for a loading placeholder.

Questions about CSS stripe generator

How do the stripes get hard edges instead of a fade?: Each color is written twice, ending at a position where the next color starts at the exact same distance. Two stops at one position make a sharp transition, and the whole pattern repeats every stripe plus gap.
What do 0 and 90 degrees look like?: A gradient at 0 degrees runs bottom to top, so its bands lie horizontally. At 90 degrees it runs left to right, giving vertical stripes. 45 and 135 give the two diagonal directions.
Can I use arbitrary angles?: This tool offers the four angles only. After copying, you can edit the number in front of deg to any value.
Does the gap have to be a different color?: It is the second color in the gradient, so set both colors the same if you only want to see the spacing pattern. The gap is the width of that second band.

Search tools

CSS Stripe Generator

About CSS stripe generator

How to use it

Default diagonal stripes

When to use it

Questions about CSS stripe generator

How do the stripes get hard edges instead of a fade?

What do 0 and 90 degrees look like?

Can I use arbitrary angles?

Does the gap have to be a different color?

Related tools

CSS Stripe Generator

About CSS stripe generator

How to use it

Default diagonal stripes

When to use it

Questions about CSS stripe generator

How do the stripes get hard edges instead of a fade?

What do 0 and 90 degrees look like?

Can I use arbitrary angles?

Does the gap have to be a different color?

Related tools