![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Dec. 14th, 2020
Let's talk CSS gradients!
Hey guys! In this tutorial, I'll be teaching you all about the CSS gradient spec and what you can do with it based on the things I've found myself using it for over the years. There's a lot going on in this tutorial already, so I'll keep this intro short. Let's get to it! 💖Notes:
fixed to the end of the gradient! Example: background:linear-gradient(to top,black,pink)fixed; will keep your gradient in place.Gradients 101
Linear gradients
Linear gradients are the ones you probably see more often in layouts; they go from one specified side or corner to the opposite in a straight line. You have eight positioning options, but you also have a ninth option of specifying your own degree increment (negative degrees are allowed.)Radial gradients
Rather than the gradient beginning from a specified side or corner, a radial gradient will fade out from its center. You have six positioning options, four of which give you measurement options (these do not have to be percentages.) You can add measurements toellipse and circle as well if you want a defined area to restrain the gradient spread to.Can I use more colors?
Of course! Use as many colors as you like if you want more control over the color change of your gradient. You can also usetransparent as a color if you want it to fade from a color to transparent to show something behind it. I use linear-gradient(to bottom,rgba(255,255,255,0.5)transparent); often so that you can get a subtle monochrome gradient layered on top of a solid background.
background: linear-gradient(to bottom, lightsalmon, hotpink, plum);
What about measurements?
Sure thing! If you don't specify measurements, the gradient will distribute evenly between your colors. When specifying a measurement for one of your colors, you're not telling it how far to blend; you're telling it how far you want the solid color to go before spreading. So, if we set our first color to50% it will take up half of the area before blending into the next color.
background: linear-gradient(to bottom, black 50%, pink);
Gradient Patterns
Can I make patterns?
You certainly can! You can create things like stripes and color blocking easily with CSS gradients by using specific types of measurements, along with some additional background specs.For color blocking, you'll want to set your first color's width, then the second color to the same width, telling the first color where to stop. This can be pixels, percentages, etc.
background: linear-gradient(to right, black 30%, pink 30%);
For stripes, you'll want to set your first color twice and your second color once, each with the measurement of how thick you want your first color to be. Then we use the
background-size spec to set the width of the second color.
background: linear-gradient(to right, black 1px, black 1px, pink 1px);
background-size: 20px 100%;
For horizontal stripes, we'll use the same method, but our background size will swap so that
100% is the width and 20px is the height instead.
background: linear-gradient(to bottom, black 1px, black 1px, pink 1px);
background-size: 100% 20px;
At this point, you're probably wondering if you can make a grid, and the answer to that is also yes! We'll set our background color the standard way, and then use
background-image for our gradient instead. From there, we'll combine two gradients by comma separating them to create our grid lines, and then set the background-size for how big we want the grid squares to be.
background: pink;
background-image: linear-gradient(to right, black 1px, transparent 1px), linear-gradient(to bottom, black 1px, transparent 1px);
background-size: 20px 20px;
Diagonal stripes are a bit different. You won't need to use
background-size and we'll use a repeating-linear-gradient instead. The color pattern will be: starting color, where the starting color ends, where the next color begins, where the next color ends. So if you wanted 2px white stripes and 20px pink stripes, you'd have:
background: repeating-linear-gradient(45deg, white, white 2px, pink 2px, pink 20px);
Let's talk about using
repeating-radial-gradient to create rings now. The color pattern will be the same as the last example: starting color, where the starting color ends, where the next color begins, where the next color ends. So if you wanted 10px white rings and 80px pink rings, you'd have:
background: repeating-radial-gradient(circle, white, white 10px, pink 10px, pink 80px);
You can read more about
repeating-linear-gradient here and repeating-radial-gradient here since I've chosen not to go into extensive detail in this guide.Combining gradients & images
How to use a CSS gradient with an image
Sometimes in a layout you want both a gradient and a transparent pattern or image! A lot of times I see people having trouble figuring out how to do that. The solution isn't immediately obvious, but don't worry; it's not hard! The issue comes in when you try to use both in the same area of styling, like putting both intobody, which is where a lot of people try first. It makes sense! However, they're conflicting styles for the same spec, background, so whichever comes second is the one that will take effect. If you want to combine them, you'll have to do something a little different instead.First, you'll put your gradient in so that it renders as the parent (or bottom) element. This needs to be in something that comes before the
<body> tag in the HTML. What comes before that? Well... the <html> tag, actually! That's pretty much it for style-able HTML tags before the opening <body> tag.html{ /* your gradient */ }Next, we'll want to add a small precaution so that on pages that don't have enough content to reach the bottom of the page, the gradient image doesn't cut short. To do this, we'll give
html a minimum height of 100% of the viewport height—but not 100% itself, because that will give us unwanted page scrolling on pages that don't need it.html{ /* your gradient */ min-height:100vh;}Finally, we'll add our background image to
body as usual, but make sure there's no background color with it or you won't see the gradient!body{background:url(IMG_URL)center fixed;}
html{background: linear-gradient(to bottom, black, pink); min-height: 100vh;}
body{background: url(https://i.imgur.com/ig8nUnB.png) center fixed;}
As I mentioned above, sometimes I layer a transparent gradient with a solid background. If you want to do this, you'll use this same method of doubling up, but you'll add your gradient to
body and a solid background color to html instead.
But wait, do you have a mystery gap?
On a final note, sometimes you'll have a weird gap at the top and bottom of your page displaying the gradient, but the image cuts off. No problem! This happens when there's a margin setting your inner page content away from the top of the page, but this is also easy to fix. Put the following example of this issue into Ye Olde code tester and try changingmargin:50px; to padding:50px; instead!In the demo example I've used the two Complete Style ID names and styling you're most likely to run into if using these CSS styles with one of my layouts, but other layouts (and some of my own) may vary! For instance, you may find the margin in
#container instead.