CSS gradients have long been a powerful tool in the web developer’s toolkit, offering a way to create smooth transitions between colors without needing to rely on images. Among the different types of gradients—linear, radial, and conic—conic gradients stand out for their ability to create stunning, circular patterns. But what if you could take your conic gradients a step further by animating them? In this guide, we’ll explore how to create and animate conic gradients using modern CSS techniques.

Introduction to Conic Gradients

A conic gradient is a type of gradient where colors transition around a central point, similar to the way the hands of a clock move. They are great for creating pie charts, color wheels, or simply adding a unique background effect to your designs.

Here’s a basic example of a conic gradient:

background: conic-gradient(
    from 90deg,
    #ff6f61,
    #ffb77b,
    #fffa86,
    #a1c99a,
    #6baed6,
    #9e9ac8,
    #de9ed6,
    #ff6f61
);

This code creates a conic gradient that starts at 90 degrees and cycles through a palette of warm and cool colors. The result is a visually appealing, circular pattern that can be used in a variety of design contexts.

Introducing Custom Properties with @property

One of the key advantages of modern CSS is the ability to create custom properties (often referred to as CSS variables) that can be dynamically controlled. In our case, we can define a custom property for the gradient’s angle, allowing us to easily animate or adjust it.

Here’s how you can set up a custom property for the gradient angle:

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.gradient-background {
  --gradient-angle: 90deg; /* Default angle */
  background: conic-gradient(
    from var(--gradient-angle),
    #ff6f61,
    #ffb77b,
    #fffa86,
    #a1c99a,
    #6baed6,
    #9e9ac8,
    #de9ed6,
    #ff6f61
  );
}

In this code:

• @property --gradient-angle { ... }: Defines a custom property called --gradient-angle that expects an angle value.
• .gradient-background: Applies the conic gradient using the --gradient-angle variable.

Here’s how to set up the animation:

@keyframes rotate-gradient {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

.gradient-background {
  --gradient-angle: 0deg;
  background: conic-gradient(
    from var(--gradient-angle),
    #ff6f61,
    #ffb77b,
    #fffa86,
    #a1c99a,
    #6baed6,
    #9e9ac8,
    #de9ed6,
    #ff6f61
  );
  width: 300px;
  height: 300px;
  animation: rotate-gradient 5s linear infinite;
}

Explanation:

• @keyframes rotate-gradient { ... }: Defines an animation that changes the --gradient-angle from 0deg to 360deg, making a full rotation.
• animation: rotate-gradient 5s linear infinite;: Applies the rotation animation to the .gradient-background class, causing the gradient to rotate continuously over 5 seconds.

Conclusion

Animating conic gradients with CSS is a simple yet powerful technique to enhance your web designs. By leveraging custom properties and keyframe animations, you can create dynamic backgrounds that add movement and visual interest to your projects. Whether you’re building a modern website, an interactive web application, or simply experimenting with CSS, this method offers a creative way to bring your designs to life.

Try implementing this in your next project and watch as your static backgrounds transform into something truly captivating!