CSS Background Stripes on div

Question

So I have a square div and i'm trying to get the background to basically look like this :

I've had a look around, and since this question has been asked a lot i've seen CSS gradients used.

I've been playing about and ended up with:

background-image: linear-gradient(
  180deg, rgba(255, 255, 255, .2) 29%,
  transparent 20%,
  transparent 51%,
  rgba(255, 255, 255, .2) 50%,
  rgba(255, 255, 255, .2) 75%,
  transparent 75%,
  transparent);

However, gradients seem to blend the colours from one to another instead of having a sharp difference like below.

What should I be doing to achieve the picture?

That picture is hypnotising. :( But the gradients are supposed to be blending in. They are not going to help. — Randy, Jun 23 '16 at 11:56
Possible duplicate of [Create a background pattern in CSS](http://stackoverflow.com/questions/37965625/create-a-background-pattern-in-css) — Johannes, Jun 23 '16 at 12:42

Mihai T · Accepted Answer · 2017-12-22T17:46:36.993

23

try this :

div#stripes {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, #fff);
  background-size: 50px 50px;
}

<div id="stripes">

</div>

jsfiddle

edited Dec 22 '17 at 17:46

answered Jun 23 '16 at 12:03

Mihai T

17,254
2
23
32

score 15 · Answer 2 · answered Jun 23 '16 at 15:34

15

You can do like this:

background: repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);

Jsfiddle

answered Jun 23 '16 at 15:34

Advaith

2,490
3
21
36

score 8 · Answer 3 · answered Dec 29 '17 at 08:56

A more flexible and elegant solution found here : https://css-tricks.com/stripes-css/

#stripes {
  height: 200px;
  width: 2000px;
  background-color:yellow;
}

.stripes {
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      #000 10px,
      #000 20px
  );
}

<div id="stripes" class="stripes"></div>

https://jsfiddle.net/ns8rn7r3/4/

score 2 · Answer 4 · answered Jun 23 '16 at 12:31

2

Please use this CSS:

body{
  background: linear-gradient(45deg, white 25%, #000 25%, #000 50%, white 50%, white 75%, #000 75%);
  background-size:98px 98.9px;
}

See in action here

answered Jun 23 '16 at 12:31

Sunil Gehlot

1,549
2
17
32

CSS Background Stripes on div

4 Answers4

Linked