For beginners, it is intuitively difficult to guess that the pattern above is created with CSS gradients. They will be like, “how possibly can it be gradients while all I see are solid colors?” After all, gradients are supposed to be smooth transitions between colors. That is how I used to think two months ago before I start an HTML & CSS course at Microverse.
Since then I started playing around with gradients and created shapes that are almost impossible to create with regular HTML elements. In this article, I have decided to share with my fellow CSS & HTML beginners the technique I used to create the pattern above. Let’s get started.
Oh, wait!
Let us make sure we have a basic understanding of how the CSS radial-gradient() function works. With this function, we can create a radial gradient which is a type of gradient where transitioning colors form circular or elliptic bands around a central point/origin.
In CSS there are other types of gradients that are worthy of attention but for the sake of this article’s shortness will only look at radial gradients.
The radial-gradient() function returns a special image type gradient. For this reason, gradients are created with the background-image property, not with the background-color property.
background-image: radial-gradient(<shape> <length> at <position>, <color-stop-list>);The CSS radial-gradient() function takes in several values that determine how the resulting gradient looks like. These values are classified as follow:
- <shape> is either a circle or an ellipse whose color is the last from the origin. The default shape is an ellipse.
- <length> consists of one value (radius length) for the circle <shape> or two values(semi-minor-axis and semi-major-axis lengths) for the ellipse <shape>. These values are positive length units: px, rem, em, %, vw, or vh.
- <position> consists of two CSS length values that define the x/y coordinate of the origin/center of the <shape>. The default value is 50% 50% which is at the center of the container. It is possible also to use keywords such as top, left, right, bottom, and center.
- <color-stop-list> is a comma-separated list of color-position pairs. Colors are specified using HEX values, RGB values, RGBA values, HSL values, and color names, while positions are often specified using %. It is okay to use other CSS length units as well. When the position is unspecified, colors will position themselves evenly to fill the <length>.
Now, we know basically how to use the radial-gradient function. If you are willing to learn more check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient. However, we know enough to continue…
It’s OK now, we can start…
Let’s create a simple HTML file with only one div element within the body and give it a class “pattern” to be used as a selector.
<div class="pattern">
</div>Then, let’s link it to a CSS file with the following code:
.pattern {
position: relative;
top: 50vh;
transform: translateY(-50%);
margin: 0 auto;
width: 50rem;
height: 50rem;
border-radius: 50%;
background-color: #8f8;
}This creates a 50 rem wide green circle and places it at the center of the document.
Now, let’s create our first radial gradient. In our style, just below the background-color, we add a background-image property and radial-gradient() function as its value. The function’s values are set as follow:
- <shape> : ellipse ;
- <length> : 40% 30%;
- <position> : top:
- <color-stop-list> : salmon, transparent.
In CSS, transparent is a color. If you didn’t know, now you know!
background-image: radial-gradient(ellipse 40% 30% at center, salmon, transparent);Notice that we didn’t set the position for the color. When we have colors with unspecified positions on the list. The first is at 0% and the last 100%. Other colors in-between will be positioned evenly.
Now we have a salmon color at the center which fades gradually and becomes completely transparent as it reaches 40% of the container’s radius horizontally and 30% vertically. That’s where lies the ellipse we defined in the function.
Next, we are going to make the surface of the ellipse opaque by pushing the salmon color’s position from 0%( at the origin) to 98% of <length>. Since it is the first color in the <color-stop-list> , There is no transition along the 98% of the <length>. This results in an opaque salmon color.
background-image: radial-gradient(ellipse 40% 30% at center, salmon 98%, transparent);The transparent color is positioned at 100%, we will have 2% wide transition. Hence giving us a smooth edge.
Another cool feature about backgrounds in CSS is the fact that we can create layered background-images and still be able to see through transparency. This is achieved by assigning a list of comma-separated values to the background-image property. These values in our case are gradient functions. We are going to take advantage of this feature by adding 3 more ellipses of the same size. We give each of them a distinct color and position(top, bottom, left, and right). We also need to swap the <length> values (40% 30% to 30% 40%) for the left and right positioned ellipses.
background-image: radial-gradient(ellipse 40% 30% at top, salmon 98%, transparent), radial-gradient(ellipse 40% 30% at bottom, salmon 98%, transparent), radial-gradient(ellipse 30% 40% at right, salmon 98%, transparent), radial-gradient(ellipse 30% 40% at left, salmon 98%, transparent);So far so good. Let us add a little bit of flavor by making this pattern repeating. This is achieved by using two CSS background properties:
background-size: 10% 10%;
background-repeat: repeat;Done!
And that’s it, we have the background pattern we were after. In this article, the main goal was not to fully understand the CSS gradient. Rather, it was to attract your attention to CSS gradients. If you are attracted check this for more on gradients. They are plenty of cool stuff you can create with this tool. So, it’s up to you. Get creative!