If you’ve been reading our blog at all, you know that we’re pretty gradient crazy. If you haven’t yet and simply found us from a quick Google – welcome! Let’s get this out of the way, we’re gradient crazy!
In fact, we’re downright nuts about crafting our own unique, awesome gradients, so it’s only natural that we’d want to use gradients as backgrounds. Hopefully if you’re on our site, you’re mad about gradients, too, so we’re certainly game to share the love. Check out our guide below on why you’d want to use gradients as your backgrounds and how you can create them on your own!
Gradients as Backgrounds: What’s the Deal?
Backgrounds have a massive impact on a website’s design. So big, in fact, it’s probably the most important aspect of the website – aside from functionality, of course. They are the strings that tie a website look and theme together. They often establish groupings, differentiate between pages, and have hand in pointing out significant elements of the site. That being said, wouldn’t you want your background to be engaging, unique, and distinct?
Gradient backgrounds can do just that. Take a look at some of your favorite websites. Do you notice that they have compelling gradient backgrounds? Odds are, at least a handful of the best designed websites out there implement some kind of gradient as a background. They contribute to the uniqueness and design of your website, all while drawing in your consumers to stick around on your page for a while.
How to Create Your Own Gradient Background
Okay, so you understand the importance of gradients as backgrounds – it’s probably time we get to the real meat of the article and teach you how to make your own. The best news? It’s really simple. Because gradients fill whatever space they’re assigned, they make wonderful background images.
The Basics
Here are a few important terms and ingredients you need to be familiar with before you start building your code for your awesome background gradient.
Background Image. Solid color backgrounds will use the term “background-color” when you code for them in CSS, but the term “background-image” refers specifically to gradients. Because gradients have a stacking order, you can think of them as layered background images, so you can layer your background image gradients over other images if you manipulate the transparency of your gradients.
Gradient. this phrase specifies the type of gradient you’ll be setting up. While linear gradients are the most common type of gradient used for backgrounds, you could also set it up for radial gradients.
Color Stops & Colors. For a gradient design in CSS, you’ll need at least two colors for the gradient to transition between. These are called color stops because they tell the code at which points each color should stop and begin along the gradient. The syntax is the most important part of your coding process, because if your sentence doesn’t work, your code won’t work out either. So, let’s break down the syntax of different gradient backgrounds.
Let’s talk about the background image for a linear-gradient background:
background-image: linear-gradient(color1, color2);How’s about a background image for a radial-gradient background:
background-image: radial-gradient(color1, color2, color3);Want more colors? Add in more color stops!Want to adjust the percentages of your color (how spaced out the colors are)? Assign each color a percentage like below:
background-image: linear-gradient(color1 30%, color2 50%, color3 20%);Want to adjust the direction your linear gradient background runs or change the shape of your radial linear gradient background is? Easy! Add in a few of those directions we discussed in our linear gradient article or some of those shape keywords we talked about in our radial gradient article.
background-image: linear-gradient(to right bottom, color1 30%,
color 2 50%, color 3 20%);background-image: radial-gradient(circle, color1 30%,
color 2 50%, color 3 20%);Gradients as Backgrounds: Not as Scary as You Thought, Huh?
See, guys. Gradients aren’t even a little bit scary (all right, they can be at first, but). Now that we’ve broken it down, they’re not all that bad. In no time at all, you can implement your own CSS gradients as background images on your website!
