DEV Community

FollowAndrew
FollowAndrew

Posted on • Originally published at followandrew.dev

1 1

CSS Conical Gradients - Awesome Button Effects!

Did you know that CSS now (largely -- see support) has support for conical gradients in addition to the standard linear and radial? If this if your first time hearing the word conical, then this tutorial is for you! Visual learners: Watch the youtube video tutorial (subscribe to the channel!):

What Are Conical Gradients?

Canonical gradients get their name from the 'cone' shape that they visually create. A picture is worth a thousand words here. Canonical gradients wrap around the outer bounds of the area, instead of slicing through the center like so:
Conic Gradient Visual

Conical Gradient Syntax

You can create conical gradients with a similar syntax to linear gradients like so:

background: conic-gradient(red, orange, yellow, green, blue);
Enter fullscreen mode Exit fullscreen mode

Units of Measure

One important thing to keep in mind, is that because Conical gradients use an ‘angle’ as values, we have atypical css unit types that we can leverage. Here is a list of the available units you can use with these gradients:

  • deg - Degrees (360 degrees)
  • grad - Gradians (400 gradians)
  • rad - Radians (2π radians)
  • turn - Turns (1 turn)
  • % - Percentage (100%)

A Few Samples:

Note, if your browser doesn’t support conic gradients, (cough Firefox) you can use this awesome polyfill.

Sunburst Background via Repeating Gradient

div{
background: #0ac repeating-conic-gradient(hsla(0,0%,100%,.2) 0 15deg, hsla(0,0%,100%,0) 0 30deg);
}
Enter fullscreen mode Exit fullscreen mode

Sunburst

Pie Charts Anyone?

note these aren't great for accessibility

div{
    background: conic-gradient(
     red 48deg, green 48deg 195deg, blue 195deg);
    border-radius: 50%
}
Enter fullscreen mode Exit fullscreen mode

Pie Chart

Checkerboard Pattern (fancy 'transparent' layer effect)

div{
    background:
    conic-gradient(#fff 0.25turn, #bbb 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #bbb 0.75turn)
    top left / 10% 10% repeat;
    outline: 1px solid;
}
Enter fullscreen mode Exit fullscreen mode

Checkerboard

True "Cone"-ic Gradient

#five{
    background: conic-gradient(from -28deg, white,black 180deg,white);
    border-radius:50%;
    transition:all .5s;
    transform:rotate(0deg);
}
Enter fullscreen mode Exit fullscreen mode

Conic

Fancy Pants Button (Ana Tudors)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more