Tag: background-image

Hello! 😃 CSS conic gradient techniques are a fantastic way to add colorful, creative flair to your designs. Today, we’re diving into the enchanting world of conic-gradient in CSS — a type of gradient where colors transition in a circular or conical pattern around a central point (either the default center or one you define within the element).

This powerful technique allows you to blend and combine colors in unique ways, creating artistic and visually striking effects. Plus, it’s perfect for building things like pie charts for presentations — no extra libraries needed!

In addition to conic-gradient CSS also offers linear-gradient and radial-gradient techniques. 🌈✨ They all have a starting and an ending point, giving us the flexibility to control the direction and flow of the gradient. It is essential to blend at least two colors, but we can blend even more, creating smooth transitions or distinct shifts between them based on our needs.

Ready to unlock 🗝 the art and practical uses of conical gradients? Let’s jump into this creative adventure! 💻

What is a conic gradient?

A CSS conic gradient is a styling technique used in CSS to create a color transition that radiates from a central point in a circular or conical pattern. It allows you to specify different color stops and angles, leading to a visually pleasing gradient effect for backgrounds or other elements on a webpage.

There are many variations and creative ways to use conic gradients — and we’ll be exploring them in the next sections!

Understanding the default direction of a CSS conic gradient

So, let’s begin with the default direction, which is clockwise. To create a conic gradient, we need at least two colors. Below, I’ve prepared some examples to show exactly what I mean.

/* blend two colors */

.conic-two-colors {
  background-image: conic-gradient(red, green);
}

/* blend two colors */

.conic-two-colors {
  background-image: conic-gradient(red, green);
}

CSS

/* blend many colors */

.conic-multiple-colors {
  background-image: conic-gradient(red, green, blue, magenta, yellow, purple, orange);
}

/* blend many colors */

.conic-multiple-colors {
  background-image: conic-gradient(red, green, blue, magenta, yellow, purple, orange);
}

CSS

/* blend black and white */

.conic-black-white {
  background-image: conic-gradient(black, white);
}

/* blend black and white */

.conic-black-white {
  background-image: conic-gradient(black, white);
}

CSS

🔖 Keep in mind that if we want to achieve a seamless transition between the last and first color, we have two ways to achieve this:

• First, we can choose intermediate colors between the starting and ending colors. For example, in our case, we can pick colors from #FF4C00 (orange) to #FF6E00 (a reddish shade), creating a smooth blend from orange to red.
• The second option, which is simpler, involves repeating the same color at both ends. In this example, we’ll use red as the repeated color.

Here’s a simple code snippet to help illustrate this.

/* using specific colors when blending */
.conic-smooth-option-a {
  background-image: conic-gradient(red, green, blue, magenta, yellow, purple, orange, #FF4C00, #FF6E00);
}

/* using the same color at both ends */
.conic-smooth-option-b {
  background-image: conic-gradient(red, green, blue, magenta, yellow, purple, orange, red);
}

/* using specific colors when blending */
.conic-smooth-option-a {
  background-image: conic-gradient(red, green, blue, magenta, yellow, purple, orange, #FF4C00, #FF6E00);
}

/* using the same color at both ends */
.conic-smooth-option-b {
  background-image: conic-gradient(red, green, blue, magenta, yellow, purple, orange, red);
}

Positioning the center of a CSS conic gradient

Move the center to the sides

In CSS, conic gradients provide the flexibility to reposition the gradient’s center anywhere within the container. This enables precise alignment with a specific side, whether or not you use percentage values (%) or define specific color stops.

In the following examples, we’ll focus on positioning the gradient center along different sides of the container.

/* Gradient starting from the left */

.conic-left-point {
  background-image: conic-gradient(at left, red, green, blue, purple, orange);
}

/* Gradient starting from the left */

.conic-left-point {
  background-image: conic-gradient(at left, red, green, blue, purple, orange);
}

CSS

/* Starting point at 75% from the left */

.conic-using-percentage {
  background-image: conic-gradient(at left 75%, red, green, blue, purple, orange);
}

/* Starting point at 75% from the left */

.conic-using-percentage {
  background-image: conic-gradient(at left 75%, red, green, blue, purple, orange);
}

CSS

/* Gradient starting at 75% left with defined color stops */

.conic-specific-stops {
  background-image: conic-gradient(at left 75%, red 5%, green 10%, blue 15%, purple 20%, orange 25%);
}

/* Gradient starting at 75% left with defined color stops */

.conic-specific-stops {
  background-image: conic-gradient(at left 75%, red 5%, green 10%, blue 15%, purple 20%, orange 25%);
}

CSS

Move the center to the corners

Building on the previous section, we can also move the gradient’s center to the corners of the container. Conic gradients in CSS allow this kind of precise positioning, with or without using color stops, giving you even more layout control.

Without color stops

The following code snippet shows a gradient that starts from the center point of our element with red color, transitions to green, then blue, followed by purple, ending with orange, creating a smooth, circular gradient effect.

.conic-default {
  background-image: conic-gradient(red, green, blue, purple, orange);
}

.conic-default {
  background-image: conic-gradient(red, green, blue, purple, orange);
}

Below we can see how the previous gradient can break into different pieces the position we choose for the gradient’s center.

The CSS code snippet .conic-corner-bottom-right starts at the bottom right corner of our element and smoothly transitions through red, green, blue, purple, and orange creating a visually appealing color blend.

.conic-bottom-right-corner {
  background-image: conic-gradient(at bottom right, red, green, blue, purple, orange);
}

.conic-bottom-right-corner {
  background-image: conic-gradient(at bottom right, red, green, blue, purple, orange);
}

CSS

The reason you’re only seeing the purple and orange colors is due to the angle of the gradient in relation to the element.

I followed the same steps with .conic-bottom-left-corner, and as the angle changes, the red and green colors become visible. The same goes for .conic-top-right-corner, where we can now see shades of blue and purple. Finally, by setting the center to the top left using .conic-top-left-corner, green and blue come into view. How cool is that! 🥳

.conic-bottom-left-corner {
  background-image: conic-gradient(at bottom left, red, green, blue, purple, orange);
}

.conic-bottom-left-corner {
  background-image: conic-gradient(at bottom left, red, green, blue, purple, orange);
}

CSS

.conic-top-right-corner {
  background-image: conic-gradient(at top right, red, green, blue, purple, orange);
}

.conic-top-right-corner {
  background-image: conic-gradient(at top right, red, green, blue, purple, orange);
}

CSS

.conic-top-left-corner {
  background-image: conic-gradient(at top left, red, green, blue, purple, orange);
}

.conic-top-left-corner {
  background-image: conic-gradient(at top left, red, green, blue, purple, orange);
}

CSS

Imagine that changing the center position and adjusting the angle is like zooming in on the gradient — revealing each quarter of the circle more closely, one at a time. 🔍 It’s like examining the gradient through a magnifying glass as you explore each corner!

With color stops

Let’s take a look at the following example, where color stops are used to better control how and where each color appears within the conic gradient.

Color stops let you define specific points along the gradient circle where a color should begin or end. This gives you greater precision over the flow of colors, rather than relying on an even, automatic blend. For example:

.conic-color-stops {
  background-image: conic-gradient(red 75%, green 80%, blue 90%, purple 95%, orange 100%);
}

.conic-color-stops {
  background-image: conic-gradient(red 75%, green 80%, blue 90%, purple 95%, orange 100%);
}

CSS

In this case, red takes up the majority of the gradient — up to 75% — and the remaining colors (green, blue, purple, and orange) appear in quicker succession toward the end.

We can also combine color stops with center positioning to control not only when colors appear but also where they start. For instance:

.conic-bottom-right-stops {
  background-image: conic-gradient(at bottom right, red 75%, green 80%, blue 90%, purple 95%, orange 100%);
}

.conic-bottom-right-stops {
  background-image: conic-gradient(at bottom right, red 75%, green 80%, blue 90%, purple 95%, orange 100%);
}

CSS

.conic-bottom-left-stops {
  background-image: conic-gradient(at bottom left, red 75%, green 80%, blue 90%, purple 95%, orange 100%);
}

.conic-bottom-left-stops {
  background-image: conic-gradient(at bottom left, red 75%, green 80%, blue 90%, purple 95%, orange 100%);
}

CSS

These examples show how positioning the gradient center at different corners—while using color stops—can dramatically affect which parts of the gradient are visible. You’ll notice that the dominant red still takes the lead, but the visibility of the other colors shifts depending on the corner you choose.

Moving the center inside the element

We continue with a really powerful feature of conic gradients: the ability to position the center anywhere inside the element. This opens up even more creative possibilities — and of course, you’re free to use color stops with these custom center positions as well.

Below, I’ve prepared two examples.

In the first one, the gradient starts from a point located 30% across and 55% down the element. It then smoothly transitions through different colors: red, green, purple, magenta, yellow, and orange. Imagine a color wheel starting from red and going around in order, stopping at each of these colors along the way.

.conic-center-30-55 {
  background-image: conic-gradient(at 30% 55%, 
  red, green, purple, magenta, yellow, orange);
}

.conic-center-30-55 {
  background-image: conic-gradient(at 30% 55%, 
  red, green, purple, magenta, yellow, orange);
}

CSS

In the second one, the gradient starts from a point 30% across and 55% down the element — but this time, it uses color stops to control exactly where each color appears.

Then it transitions through different color stops: red 15%, green 30%, purple 45%, magenta 60%, yellow 90%, and finally orange at 100%. You can use my example or you are free to create your own. I chose these values based on what felt right to me—but feel free to experiment and create your own version. It’s totally up to you

.conic-center-30-55-stops {
  background-image: conic-gradient(at 30% 55%, 
  red 15%, green 30%, purple 45%, magenta 60%, yellow 90%, orange 100%);
}

.conic-center-30-55-stops {
  background-image: conic-gradient(at 30% 55%, 
  red 15%, green 30%, purple 45%, magenta 60%, yellow 90%, orange 100%);
}

CSS

You may also like 🎬

CSS Linear Gradient Techniques: Create Colorful Line Drawings

July 22, 2024

CSS Radial Gradient: How To Make Colorful Infinite Loops

May 16, 2024

Changing the starting angle of a CSS conic gradient

Let’s move forward and explore another option we have another option available with conic gradients, as we are free to start the gradient from different points.

In our example the gradient starts at 45 degrees to the right, moving from red to blue. This means the colors change smoothly in a circular motion, like a slice of pie with red at the starting edge and blue at the finishing point.

.conic-angle-45 {
  background-image: conic-gradient(from 45deg, red, blue);
}

.conic-angle-45 {
  background-image: conic-gradient(from 45deg, red, blue);
}

CSS conic gradient without blending

Another option is to use a non-blend gradient technique. In the following code snippet, the gradient starts with the color red at the top of the circle and makes sharp, sudden transitions to the next colors — green, blue, purple, and finally orange. Each color occupies a distinct 20% slice of the circle, creating a step-like, segmented pattern with no smooth blending between sections. It’s like a colorful pie chart made of equal parts..

.conic-no-blending {
  background-image: conic-gradient(
  red 0%, red 20%, 
  green 20%, green 40%, 
  blue 40%, blue 60%, 
  purple 60%, purple 80%, 
  orange 60%, orange 100%
  );
}

.conic-no-blending {
  background-image: conic-gradient(
  red 0%, red 20%, 
  green 20%, green 40%, 
  blue 40%, blue 60%, 
  purple 60%, purple 80%, 
  orange 60%, orange 100%
  );
}

Creating repeating CSS conic gradients

The repeating-conic-gradient is a function that is used to repeat the conic gradient. Below are two examples that show just how flexible and creative conic gradients can be.

1. Repeating every 10%: The gradient originates from the center of the element. It begins with red at the center, then transitions to green at 5%, and to blue shortly after. At 10%, it shifts to a specific pinkish-red color defined by the hex code #ff1064. These color transitions repeat every 10% of the circle, creating a series of concentric slices that cycle outward in a continuous, colorful loop.

.conic-repeat-10 {
  background-image: repeating-conic-gradient(red, green 5%, blue 5%, #ff1064 10%);
}

.conic-repeat-10 {
  background-image: repeating-conic-gradient(red, green 5%, blue 5%, #ff1064 10%);
}

2. Repeating every 25%: In this example, the gradient is centered within the element and begins with green at the starting point. As it radiates outward, it shifts to black at 8%, then to orange at 18%, and finally to a vibrant pinkish-red at 25% (using the hex code #ff1064). These defined color stops repeat every 25% of the circle, creating a looping, segmented pattern that spirals out from the center in consistent, colorful sections.

.conic-repeat-25 {
  background-image: repeating-conic-gradient(green, black 8%, orange 18%, #ff1064 25%)
}

.conic-repeat-25 {
  background-image: repeating-conic-gradient(green, black 8%, orange 18%, #ff1064 25%)
}

What to avoid when creating CSS conic gradients

Always bear in mind that, to create a harmonious and uniform repeating conic gradient, it’s important to maintain consistent spacing and carefully planned distances between color stops.

In the image below, we can observe that green, black, and orange are each repeated three times, while the color #ff1064 (a shade of pinkish-red) appears only twice. This happens because the total space occupied by all the defined color stops—green, black, orange, and #ff1064—adds up to 40% of the conic gradient.

This setup ensures that the entire pattern repeats in a balanced way: the specified colors take up 40% of the gradient, and the remaining 60% of the circle is evenly distributed across the repeated pattern. The result is a visually pleasing and consistent circular repetition.

The following code snippet defines the color stops and their positions for this repeating conic gradient:

.conic-avoid-repeating {
  background-image: repeating-conic-gradient(green, black 8%, orange 18%, #ff1064 40%);
}

.conic-avoid-repeating {
  background-image: repeating-conic-gradient(green, black 8%, orange 18%, #ff1064 40%);
}

Here’s what each part means:

• green: This is the starting color of the gradient. It begins right at the 0% mark.
• black 8%: The next color in the gradient is black, and it starts at 8%.
• orange 18%: Orange follows next, starting at 18% of the circle.
• #ff1064 40%: Finally, the last color in the gradient is a shade of pinkish-red specified by the hexadecimal color code #ff1064, and it starts at 40% of the circle’s circumference.

After that, the pattern repeats, starting again from green and continuing through the same sequence.

Creating amazing pie charts with CSS conic gradient

The CSS conic function is used to create conic gradient backgrounds. A conic gradient creates a circular gradient, much like a pie chart, with or without different color stops defining different sections of the circle.

And here’s the fun part: we’re completely free to shape our gradients into perfect circles using CSS! Just apply a border-radius of 50%, and you can create stunning pie-style visuals. 😃

.pie-chart {
  background-image: conic-gradient(
  red 0%, red 12%, 
  orange 12%, orange 30%, 
  yellow 30%, yellow 48%, 
  green 48%, green 65%, 
  blue 65%, blue 82%, 
  purple 82%, purple 100%
  );
}

.circle {
  width: 240px;
  height: 240px;
  border-radius: 50%;
}

.pie-chart {
  background-image: conic-gradient(
  red 0%, red 12%, 
  orange 12%, orange 30%, 
  yellow 30%, yellow 48%, 
  green 48%, green 65%, 
  blue 65%, blue 82%, 
  purple 82%, purple 100%
  );
}

.circle {
  width: 240px;
  height: 240px;
  border-radius: 50%;
}

Breakdown of the color segments:

• red 0%, red 12% This pair defines a red segment that starts at 0% and ends at 12% of the circle. This represents the first segment of the conic gradient.
• orange 12%, orange 30%: Starts right after red and continues to 30%, forming the orange slice.
• yellow 30%, yellow 48%, green 48%, green 65%, and blue 65%, blue 82% each define their own slices.
• The last segment, purple 82%, purple 100%, defines the purple segment that starts at 82% and goes all the way to 100% of the circle. This represents the last segment of the conic gradient.

Each pair of color stops defines a slice of the CSS conic gradient, making it easy to visualize proportions — just like a pie chart!

You may also like 🎬

The Unique Origin of The Term Bug in Software Development

March 1, 2024

How To Decide If Programming Is Right For You?

June 13, 2024

The Burnout Syndrome – How to Identify and Overcome It

August 10, 2024

Unmasking Impostor Syndrome In Tech: Watch Out For These Signs

July 9, 2024