Gradients are all the rage in coding and website design. They’re fun to build, easy to create, and are visually appealing on your page. Gradients can be spotted all over mainstream media and splatted throughout brand design – whether as backgrounds, logos, text, and more, it’s hard to deny their popularity (and even harder to deny their visual appeal).
The cool thing about gradients is the variety that are available – gradients come in all shapes, sizes, colors. You’ll likely see the most common ones the most often: linear gradients and radial gradients. We’ve already talked a bit about CSS Linear Gradients, the most popular gradient and the easiest-to implement. These types of gradients color-progress along a straight line in the direction of your choice.
But what about radial gradients? What are those, and what’s the difference between that and a linear gradient? If you’re a touch confused about the magic of the radial gradient, no worries. Read on to get the details and the inside scoop on how to design and code your own radial gradients for your creative use! What is a Radial Gradient and Why Does It Matter?
Radial Gradients are just like linear gradients with a little bit of an exception. They both are progressions of two or more colors, but unlike a linear gradient, the radial gradient is defined by it’s center. Think about it – radial means from the center, so it’s only natural that the center would define the colors. It’s easier when you think about it like a gobstopper. You’ve all tried those right? They start with a specific color on the outside, but when you suck on them for a bit, the colors gradually change moving toward the center. The outside of your gobstopper could be green, and the very center could be red, with gradual color change throughout. So, now that you understand what a radial gradient is, you might be asking yourself “why should I care about radial gradients?” Odds are, you’re trying to design a site that’s visually appealing, trendy, and engaging. Gradients can answer all those calls, and radial gradients can give elements of your site a unique, trendy look. Even if you’re not invested in the latest fad, you obviously want your site to look good, and using gradients is one of the easiest way to boost the visual appeal of your site.
Breaking the Code: The CSS Radial Gradient
We’ll present this to you the same way we did with the linear gradient to aim for a consistent, easy-to-understand explanation.
What You’ll Need to Know
Let’s talk about the basics of what you’ll need to know to create your own custom, radial gradient.
Color-Stops. In the most basic version of a CSS radial gradient code, all you'll need is at least two colors for the gradient to transition between. These are typically referred to as color-stops since, generally, they tell the code at which points each color should stop along the gradient. More about that later, though.
Shape.This determines the shape of the gradient, and since we’re talking about radial gradients, they’re limited to being circular in nature. Your shapes will be between an ellipse or a circle. Any space you’re trying to fill that is square would likely fit the circle shape best, while a rectangular space is ripe for ellipse.
Size. The size influences the ending shape of the gradient by taking your shape value you determined and instructing the gradient where to end. You can use key-words like closest-side, farthest-side, closest-corner, and farthest-corner.
Syntax. The most important part of creating a beautiful CSS radial gradient is the CSS itself. The simplest form of the radial gradient is as follows:
background: radial-gradient(shape size at position, start-color, ..., last-color);
Now that we’ve got those parts covered, let’s get into the breakdown of the code itself.
The Ingredients
Let’s take a deeper look at the components that make up the radial gradient so that we can put them together to create a gorgeous feature for your site!
The Position
Let’s think about the radial gradient like it’s the cake fitting into a pan. The pan is its position of the gradient and what encompasses the box. This works the same way it does on background position, so, keywords like “top,” “right,” “left,” and “center” will work here. You can even use a combination like, “top center.” You also are able to specify an exact position for your radial gradient using a numerical value. If you set the property to 350px * 200px, the position would take that size and the gradient along with it! By default, your radial gradient will be positioned at the top left corner of the containing element, but you can manipulate this to any position you’d like!
The Length and Percentage
This is a cool feature – you can set a numeric value that serves as the circle’s radius. You set this by determining the length with positive pixels or relative units – unfortunately, you can’t use negative units or percentages. Then, you can assign a second numerical value to set a specific size of an ellipse! Unfortunately, you cannot do this with a circle. The size is always going to be relative to the gradient box rather than the gradient itself.
The Color Stops
These color stops are your color values that help define your gradient. Any color value that you can use in CSS will be accepted here, so think: hex, named, RGB, and HSL. Every individual color stop is as important as the next, and no gradient is complete without it. There are tons of different options for how the gradient can be shown, too. For example, if using RGB, you could add an alpha number for transparency. The code can work without them, but positions can also be added after each color for more control over how the gradient looks and where each color blends with the next.
These positions can be set in percentages or pixels, depending on which is easier for you. You might also think of these numbers as the length of that color. For example, if you added a 30% position to a red color-stop, that chunk of red would stop at 30% of the box and continue on to blend into the next color. If you don’t manually set these positions, the browser will automatically determine the positioning based on how many colors are set, and those positions will be evenly spread out across the space your radial gradient is taking up.
Radial Gradients: Easier than it looks
The best way to learn about radial gradients is to play with them and manipulate them yourself! But if you’re still feeling a bit iffy, that’s okay! Check out a few examples from real life.
Once you break down the syntax of a radial gradient, and all the fun stuff that goes into creating the perfect coding sentence, crafting a radial gradient is pretty fun! If you get out-of-focus, just remember that you’re on your way to creating a beautiful gradient for your site!
