A Deep CSS Dive Into Radial And Conic Gradients — Smashing Magazine

Quick summary ↬

In this article, we’ll be taking a closer look at two gradients: conic-gradient and radial-gradient. You’ll see how each one of them works in detail, what the differences and similarities are between them, how and where to use them, and some use cases for each.

CSS gradients are a useful CSS feature that can be used to create interesting UI effects or even help us in drawing something without the need to create HTML elements for it. Two gradients that I would like to focus on in this article are conic-gradient and radial-gradient. Each one works differently (conic gradients are curved, while radial gradients are a straight line).

To follow along, you don’t need to know about either radial-gradient or conic-gradient. I will try my best to explain them in a good manner.

Let’s dive in!

What Is A Radial Gradient?

From their name, radial-gradients provide us with the ability to draw radial elements like a circle or an ellipse.

Let’s look at the most basic syntax.

The Most Basic Example

In this example, we have a radial-gradient with two color stops. This resulted in an ellipse-shaped gradient.

.element {
    background: radial-gradient(#9c27b0, #ff9800);
}

Radial-gradient

(Large preview)

The above is the most basic radial-gradient we can do in CSS. You might be wondering, why it defaulted to an ellipse? Well, let me explain.

If there is no shape name defined in the gradient (circle or ellipse), it will default to an ellipse in case:

  • There is no size determined;
  • Or, there are two values (for the width and height).

How Does A Radial Gradient Work?

I will go through a series of visuals that will show how a gradient works by incrementing different keywords and additions.

First, let’s get back to the initial example.

.element {
    background: radial-gradient(#9c27b0, #ff9800);
}

When there are two colors without identifying the shape, the gradient will default to an ellipse, like so:

Ellipse-shaped gradient

(Large preview)

The ellipse is filling the width and height of its container. It looks blurred because the browser assumed that the start and stop points are 0% and 100%, respectively.

Here is how the browser sees the gradient:

.element {
    background: radial-gradient(#9c27b0 0%, #ff9800 100%);
}

If we append circle before the first color stop, then this is how it looks:

.element {
    background: radial-gradient(circle, #9c27b0, #ff9800);
}

Circle-shaped gradient

(Large preview)

Now that you have an idea about how the circle and the ellipse look like by default, let’s get into positioning.

By default, both of them are centered horizontally and vertically in their container. In other words, at 50% 50%:

Ellipse and circle elements centered horizontally and vertically in their container

(Large preview)

The important thing to notice here is that the positioning happens from the center of the circle or ellipse, so we position a circle at the top left, what will be positioned is the center point.

Let’s take a closer look at a few examples.

.element {
    background: radial-gradient(circle at top left, #9c27b0, #ff9800);
}

Radial-gradient with circle at top left

(Large preview)

We could also center it on the right side. Adding only right will center the circle on the right 50%:

.element {
    background: radial-gradient(circle at right, #9c27b0, #ff9800);
}

Here is how it looks:

Radial-gradient with circle at right

(Large preview)
More after jump! Continue reading below ↓

What Is A Conic Gradient?

The conic-gradient() CSS function creates a gradient that is rotated around the center of the element. Let’s see a basic example.

.element {
    background: conic-gradient(#9c27b0, #ff9800);
}

Conic-gradient

(Large preview)

Look at how the gradient starts from the center point of the element. It rotates from 0deg to 360 by default.

Let’s see what happens when we add a hard stop value for the first color.

.element {
    background: conic-gradient(#9c27b0 50%, #ff9800);
}

Conic-gradient where the first color fills 50% of the element, the second one is gradually shown till 100%

(Large preview)

Now the first color fills 50% of the element, while the second one will gradually be shown till 100%.

What happens if we apply a hard stop on the second color, too? In the snippet below, the first color will fill 50% of the element, the second one will start from 50% to the end (100%).

.element {
    background: conic-gradient(#9c27b0 50%, #ff9800 0);
}

Conic-gradient where the first color fills 50% of the element, and the second one starts from 50% to the end

(Large preview)

Increasing the first color stop value will create an angled fill:

.element {
    background: conic-gradient(#9c27b0 65%, #ff9800 0);
}

The first color stop is increased up to 65% which forms an angled fill

(Large preview)

Not only that, but we can also create a repeating gradient using the CSS function repeating-conic-gradient() as shown below.

.element {
    background: repeating-conic-gradient(
    #9c27b0 0 15deg,
    #ff9800 15deg 30deg
    );
}

The above snippets fill the first color from 0deg to 15deg, then the second color is filled from 15deg to 30deg. With repetition, it will look like the figure below:

Repeating-conic-gradient

(Large preview)

Use Cases For Radial Gradients

Oftentimes, we need to add an illustration or a pattern as a background. In case there is a headline and/or secondary text, it might be difficult to read them, of course.

radial-gradient In A Hero Section

Using an ellipse gradient with the same color as the background can help make the content stand out. In the following example, notice how the content is overlapped with the background. It makes it a bit hard to focus on reading than looking at the pattern:

An example of a use case where the content is overlapped with the background

(Large preview)

A common fix for that is to add an ellipse with the same color as the background underneath (to make it blend with it).

Here is the hero section with the ellipse (colored in grey, just for demo purposes):

The hero section with the ellipse colored in grey

(Large preview)

Here is how to reflect that in CSS:

.hero {
    background-color: #fbfafa;
    background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg");
    background-position: center;
    background-size: 70% 70%, cover;
    background-repeat: no-repeat;
}

And example of a use case where the content isn't overlapped with the background anymore, due to the added ellipse with the same color as the background underneath

(Large preview)

That way, we covered the pattern under the content, it’s much easier to read it now.

Dotted Pattern Effect

In order to create an effect of a dotted pattern, we can use radial-gradient. Here is how it looks:

Dotted pattern

(Large preview)

To achieve that, we can create a tiny circle and the rest of the gradient will be transparent.

Here is how it looks on its own:

Circle color and the rest of the gradient is transparent color.

(Large preview)

When this pattern is repeated, here is how it looks:

A repeated pattern with a cirlce color and the rest of the gradient is transparent color

(Large preview)

To reflect that in CSS, we need to add a width and height for the gradient. Since gradients repeat by default, it will result in the above pattern.

.dot-pattern {
  --color-1: #9c27b0;
  --color-2: rgba(0,0,0,0);
  background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0);
  background-size: 15px 15px;
}

Image Effects

Combined with mix-blend-mode, radial gradients can create some interesting UI effects for images. In the following example, notice how the circle is positioned at the top-left corner. We can take benefit from that by playing with blend modes to achieve a specific effect.

An example where radial gradient creates an interesting UI effect for an image. Namely, the circle is positioned at the top-left corner of the image which creates a gradient

(Large preview)
.thumb:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, #9c27b0, #ff9800);
    mix-blend-mode: hard-light;
    opacity: 0.4;
}

Use Cases For Conic Gradients

Pie Charts

The first use case that I can think of for conic gradients is simple pie charts. It’s been a thing that we want to do in CSS a while ago, and now it’s possible with ease.

Pie chart

A simple pie chart (Large preview)
.pie-chart {
    width: 100px;
    height: 100px;
    background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0);
    border-radius: 50%;
}

Backgrounds And Patterns

There are tons of possibilities to create a pattern with conic gradients. For this example, I will focus on the checkerboard pattern.

Checkerboard pattern

A 2×2 checkerboard pattern achieved with conic-gradient(). (Large preview)

Here is what happens in the following gradient:

  • The #fff color is covering 90deg of the element;
  • Then it’s followed by #000 till 180deg;
  • Then it’s followed by #fff till 270deg;
  • Finally, the #000 filled till the end angle (360deg).
.checkerboard {
    --size: 25px;
    width: 200px;
    height: 100px;
    background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0);
    background-size: var(--size) var(--size);
}

When repeated and controlled via background-size, it will look like this:

A repeated checkerboard pattern

A preview of the checkerboard pattern that has been repeated several times. (Large preview)

Not only that, but we can achieve really interesting effects by rotating some values in a different way. Here is an example:

.element {
    background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0);
}

A rotated repeated checkerboard pattern

Same checkboard pattern, but different. (Large preview)

UI Patterns

Sometimes, we might need to generate a random UI pattern that takes different shapes. We can use conic-gradient to achieve that. The idea is that we control the gradient size via background-size, and then change the conic-gradient angle to achieve different effects.

We have an element with a width and height of 200px. Within this element, we will repeat the background.

.element {
    --size: 20px;
    width: 200px;
    height: 200px;
    background-size: var(--size) var(--size);
}

To imagine it better, each background will have a size of 20px for both width and height, and it will be repeated horizontally and vertically.

An element with a width and height of 200px, and within this element there is a repeated background which has a size of 20px

An element (200×200px) which has a repeated background with a size of 20px. (Large preview)

Now, each square you see will contain a conic-gradient. For now, I will add two blue shades to demonstrate the concept better.

.element {
    --size: 20px;
    width: 200px;
    height: 200px;
    background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0);
    background-size: var(--size) var(--size);
}

This is how the conic gradient looks without repeating it:

Two squares with blue conic gradients in a triangle shape. The first square has a dark-blue background, and the second square has a transparent one

(Large preview)

With repeating, it looks like this. Now, the point is to make the second color transparent, which will result in a triangle shape.

An element with a repeated background with triangle shapes

(Large preview)

By having a different angle, we can randomize the pattern shape to get interesting effects.

Different pattern shapes which are formed by different angles: 0,08 turn, 0,03 turn and 0,5turn

(Large preview)

Animating Conic Gradients With @property

We can create interesting animation effects with conic-gradient. However, this isn’t possible by default. We need to use the @property definition to define a custom property that we’ll use for the animation.

@property --conic-mask {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.conic-mask {
    --conic-mask: 0%;
    -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000);
    transition: --conic-mask 1s ease-out;
}

.conic-mask: hover {
    --conic-mask: 100%;
}
An animation effect with conic-gradient.

Cut Corners With Custom Shapes

This is a demo by Temani Afif. The idea is to use conic-gradient as a mask to create cut-corners effects:

See the Pen [Cut corners with custom shape [forked]](https://codepen.io/smashingmag/pen/jOGKjxQ) by Temani Afif.

See the Pen Cut corners with custom shape [forked] by Temani Afif.

Conic Gradients

We can use conic-gradient to create subtle gradient effects that have corners darker or lighter corners with other colors. Conic.css is a tiny CSS library by Adam Argyle that features lots of lovely conic gradients.

Conic gradients with different colors

(Large preview)

Using Conic Gradients For Section Backgrounds

I saw this on a demo shared by Scott Kellum. I really liked the way the technique works to add a partial color to a footer while at the same time it looks smooth.

.footer {
    background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%);
}

Typetura footer with conic gradient

(Large preview)

Conclusion

As you’ve seen, using CSS radial-gradient and conic-gradient functions can result in very interesting (and useful) UIs. However, there is no black and white when it comes to when to use each. Most of the time, it depends on the use case at hand.

I hope you find the article useful. Thanks a lot for reading!

Further Reading On Smashing Magazine

Smashing Editorial
(vf, yk, il)
WP-DD.COM

About WP-DD.COM

We specialize in: WordPress Design, WordPress Development, Web Design, Web Development, Graphic Design, Mobile Development, Search Engine Optimization (SEO) & More. Contact Us Today: [email protected] or Upwork: wp-dd.com/upwork

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.