Grow your CSS skills. Land your dream job.

Stripes in CSS

Published by Chris Coyier

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place.

Normal Colored Diagonal Stripes

Diagonal stripes are easy to pull off thanks to repeating-linear-gradient():

background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

Rather than the very last color-stop being 100% (or nothing, which means 100%) it's a fixed value. Beyond that, it just kinda starts over. This is how I think of it (zoomed in):

See the Pen epfEc by Chris Coyier (@chriscoyier) on CodePen.

Gradient Diagonal Stripes

If you make the background a regular linear-gradient(), and then make half the stripes totally transparent using repeating-linear-gradient(), it can appear as if the stripes have gradients. Because of multiple backgrounds (and stacking order), you can do that all together on a single element:

background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #eee,
    #999
  );

See the Pen xhkpD by Chris Coyier (@chriscoyier) on CodePen.

Stripes Over Image

Perhaps a texture? Any image will work. You could reveal part of the image by making some stripes fully transparent and some fully opaque. Or, any combination. Again multiple backgrounds allows this to all happen on the same element.

background: repeating-linear-gradient(
  45deg,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 10px,
  rgba(0, 0, 0, 0.3) 10px,
  rgba(0, 0, 0, 0.3) 20px
),
url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png);

See the Pen gaKyv by Chris Coyier (@chriscoyier) on CodePen.

Any Direction, Any Angle

It doesn't have to be exactly 45degrees. That's part of the beauty of the repeating-linear-gradient(). It's not like this perfect rectangle that has to line up and repeat, it's just a set of drawing instructions that repeats.

background: repeating-linear-gradient(
  -55deg,
  #222,
  #222 10px,
  #333 10px,
  #333 20px
);

See the Pen qfHmw by Chris Coyier (@chriscoyier) on CodePen.

Straight Stripes (slightly better browser support)

There is a super old syntax for CSS gradients that used -webkit-gradient() (note the no "linear" or "radial"). Basically: Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Old stuff. Those browsers don't support repeating gradients. But you could kinda fake it, especially for straight stripes, by making a small rectangle of background via background-size, drawing the stripes in there, and having it repeat naturally like background-image does.

background: linear-gradient(
  to bottom,
  #5d9634,
  #5d9634 50%,
  #538c2b 50%,
  #538c2b
);
/* The rectangle in which to repeat. 
   It can be fully wide in this case */
background-size: 100% 20px;

See the Pen uxJrf by Chris Coyier (@chriscoyier) on CodePen.

If you wanted to get crazy, you could transform: rotate() some element with these straight stripes and cut off the overflow, in which to replicate diagonal stripes with deeper browser support. Sounds like a lot of work.

Vertical Stripes

You could use the same method as above for vertical stripes too. Or, just use repeating-linear-gradient():

background: repeating-linear-gradient(
  to right,
  #f6ba52,
  #f6ba52 10px,
  #ffd180 10px,
  #ffd180 20px
);

See the Pen oCpEu by Chris Coyier (@chriscoyier) on CodePen.

Just to be clear, with repeating-linear-gradient() you are best off doing a -webkit-repeating-linear-gradient() as well as the unprefixed one, if you're, you know, prefixing buy yourself which you shouldn't.

Radial Stripes

Who says they have to be straight lines eh? Radial gradients can be repeating-linear-gradients():

/* Note the RADIAL */
background: repeating-radial-gradient(
  circle,
  purple,
  purple 10px,
  #4b026f 10px, 
  #4b026f 20px
);

See the Pen AEymd by Chris Coyier (@chriscoyier) on CodePen.

Funky Town

Sometimes rounding errors (maybe?) or other kinda rendering funkiness happens.

Whattyagonnado. I suspect it will get better over time.

Update: Christopher Cohen writes in:

You can defeat funky town by setting percentage-based stops and using background-size. I don't know if Chrome just calculates to a different precision for % vs px, but I found this got me beautifully neat lines.

Another quick tip; sometimes you need to specify background-attachment: fixed or it ignores background-position. This is useful when styling progress bars, etc., with overlapping gradient-filled boxes.

See the Pen Repeating gradients by Christopher Cohen (@Jeevecore) on CodePen.

All Demos

All together now.

Comments

  1. Michael
    Permalink to comment#

    Thanks Chris, this is a keeper… and it only took five minutes to be told “.. don’t do that”

  2. kyrodes
    Permalink to comment#

    I purposely tried to use diagonal stripes without using repeating-linear-gradients and got some weird patterns:

    Saw pattern:

    color: white;
      background: linear-gradient(
        45deg,
        #5d9634,
        #5d9634 50%,
        #538c2b 50%,
        #538c2b
      );
      background-size: 20px 10px; 
    

    Triangles pattern:

    color: white;
      background: linear-gradient(
        45deg,
        #5d9634,
        #5d9634 50%,
        #538c2b 50%,
        #538c2b
      );
      background-size: 20px 10px; 
    

    Dots pattern:

    background: radial-gradient(
        circle,
        purple,
        purple 50%,
        #4b026f 50%, 
        #4b026f
      );
      background-size: 20px 20px;
    
  3. Permalink to comment#

    About the first image. The angle shown there is not the gradient angle (the angle appearing in the gradient function), though in this case (45deg) it happens to be equal to it (because 90 – 45 = 45).

    With the current standard syntax, the gradient angle is the angle between the vertical axis and the gradient line (the line giving the direction of the gradient). I think this pen explains it it better than my words can (click dots to select a new gradient angle and the value in the codebox at the bottom should also change).

  4. Permalink to comment#

    About jagged edges when having sharp transitions between two colours (either with a random angle for linear gradients or with radial gradients). IE seems to behave best here, especially when it comes to radial gradients, with linear ones the edges aren’t that smooth, though they still look better than in other browsers. One thing that has always worked in IE and Firefox for me, and sometimes also in Chrome, has been to leave 1 to 3px in between.

    Something like this:

    background: repeating-linear-gradient(
        -55deg,
        #333 1px,
        violet 2px,
        violet 11px,
        #333 12px,
        #333 20px
      );
    

    Pen (edges look nice and smooth in IE and Firefox, but Chrome gets really weird).

  5. Ken
    Permalink to comment#

    Sure, easy to do…unless you want to support IE9 or earlier. And while Windows XP support will be ending shortly (so theoretically we’ll be able to ignore IE8), Vista support continues until 2017, and Vista can’t install IE10. So IE9 support will probably be a good idea for awhile longer.

  6. suprsidr
    Permalink to comment#

    Lets not forget Lea’s examples http://lea.verou.me/css3patterns/

    • Fabulous resource. Brings back memories of all the bitmap fill patterns on my family’s 1980s-era (monochrome) Apple Macintosh. (Not sure that’s necessarily the feeling you would want to evoke in a 2010s-era webpage, but I suppose it depends on the subject matter!)

  7. Permalink to comment#

    Awesome as usual sir.

  8. pipasha
    Permalink to comment#

    whhooaaooo…
    Learnt a lot..

    Also thanks to @suprsidr

  9. Simple And superb are css patterns, But it is a old trick we can do more with stripes?
    also we can do with check patterns, use opacity and 2 background layers :D

  10. This is great. I like the idea of repeating-linear-gradient, but it never seems to render nicely for me (or inconsistently). Maybe I’m just a bit to OCD on this, but the variation in stripe width bugs me plus the random jaggies it produces. It’s pretty minor and I’m sure most people don’t notice or care, but has anyone found a solution for this or a common browser/OS combo that renders better.

    I create them using just a linear gradient. Seems to render better. Maybe it’ll be better in future browser releases. I’m on a Mac Chrome 33.

    codepen example

    Thoughts?

  11. If you wanted to get crazy, you could transform: rotate() some element with these straight stripes and cut off the overflow, in which to replicate diagonal stripes with deeper browser support. Sounds like a lot of work.

    That definitely sounds like crazy & a lot of work. Get out your calculator (or maybe your CSS preprocessor can do the calculations for you), and figure out the vertical and horizontal distance between stripes of the same colour and use that for your background size.

    For 45 degrees, that means

       width = height = sqrt(2) * (stripeRepeatWidth)
    

    For any other angle, you need to do some trigonometry. It took me a while to get the equations right, but they can be summed up as

      width = (stripeRepeatWidth) * sin(angle)
      height = (stripeRepeatWidth) * cos(angle)
    

    http://codepen.io/AmeliaBR/pen/cBlAI?editors=110 for examples and trig diagram.

    The only extra complication, is that you have to repeat your stripes a few times to fill up the rest of the rectangle.

  12. This is a great article, repeating linear gradients (esp diagonals) are a blummin’ nightmare! Thanks for sharing this Chris!

  13. I think this book will help a lot about CSS.
    visual quick start guide for css3

  14. Great article Chris. Really simple but very effective. Bookmarked! Thanks Laurence

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".