#SIMPLE STRIPE BACKGROUND CSS HOW TO#
#SIMPLE STRIPE BACKGROUND CSS SERIES#

Let’s dive in! linear-gradient() striped backgroundĪ linear-gradient has two or more colors transitioning in a straight line. You can check out examples for each CSS striped background method in this CodePen collection.

repeating-radial-gradient() striped background.

repeating-linear-gradient() striped background.

#SIMPLE STRIPE BACKGROUND CSS HOW TO#

We’ll also go over how to customize the striped background with animations and additional layers. We’ll cover five different ways of doing this using gradients. In this tutorial, you’ll learn how to implement striped backgrounds with CSS. But, if you can get it right, you can really enhance the visual appeal of the webpage. Stripes can be quite uncomfortable to look at for extended periods because they sometimes cause visual distortions. As a result, most backgrounds are subtle, with soft, plain colors.ĭetailed or patterned backgrounds can be tricky, especially stripes. We have a really nice background striped pattern in place.Backgrounds should never outshine the main elements on the page - they aren’t the main focus. Now, we have an absolutely seamless transition in our background pattern. Instead of transparent 55 to 100, we'll go 55 to 95 percent and add the last 5 percent of black. You can see already that, on the top edge here, the stripe is pretty seamless.Ģ:09 Let's do the same for the end of the gradient. The first five percent will be black, from zero to five percent. Instead of going from to 45 percent, we'll go from 5 percent to 45 percent. Because our black stripes have a thickness of 10 percent, from 45 to 55, we want to have 5 percent at the start and 5 percent at the end also black, to make a seamless transition from square to square in a repeated pattern.ġ:53 Let's make that back to transparent. It cuts across this band that goes from 45 to 55 percent.ġ:30 Because we have that square shape, we actually want a little portion of our gradient at the start and also at the end to have the same color as the stripe. You can see that we start with white from the bottom right corner, which used to be transparent. I'll make it white.ġ:15 This reveals nicely our square pattern, this 55 by 55. To help you understand what's happening, I'll change this first color stop, this transparent from to 45 percent. If I make the background size a bit bigger for now - let's say 55 by 55 - you can see this odd square corner shape here. By default, it will repeat on the x- and y-axis.Ġ:54 We're getting closer, but, as you can see, there is this weird little dots here between each little segment. We'll go with 20 pixels and 20 pixels, so a square pattern. The next thing we need to do is define a background size to make this pattern repeat over and over.

#SIMPLE STRIPE BACKGROUND CSS SERIES#

Let's save that.Ġ:36 It's sort of working, but right now, it's just one big stripe and not a repeated series of stripes. Then we'll go with black from 45 percent to 55 percent and, from there onwards, back to transparent from 55 percent all the way up.

Let's go with transparent from to, let's say, 45 percent. We're going to use a mix of transparent and black here in our color stops. It's basically going to start from the bottom right and go to the top left.Ġ:14 We want our stripes to show the background color behind them. For the angle of our gradient, I'm going to go with -45 degrees.

As we've seen before, it's applied to the background image property. 0:00 We're going to create a linear gradient.

Simple stripe background css