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
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):
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 );
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/[email protected]);
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 );
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: 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;
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.
You could use the same method as above for vertical stripes too. Or, just use
background: repeating-linear-gradient( to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px );
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.
Who says they have to be straight lines eh? Radial gradients can be
/* Note the RADIAL */ background: repeating-radial-gradient( circle, purple, purple 10px, #4b026f 10px, #4b026f 20px );
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: fixedor it ignores
background-position. This is useful when styling progress bars, etc., with overlapping gradient-filled boxes.