📝 This Week in Web Design and Development

View this newsletter on the web.

Let’s start this week’s newsletter with conic gradients: they’re super neat! And they’re coming to a browser near you! Available in Chrome and Safari today (coming to Firefox soon, and also polyfillable), they’re an interesting addition to what’s possible with CSS these days.

The idea is that we can make gradients in a way that we haven’t been able to before and this opens us up to a bunch of interesting design options. Not so long ago Geoff wrote about how to use them and showed how we can make the following design now with just a single line of CSS:

.conic-gradient { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }

Just like we can create hard color stops with other types of gradients (e.g. how we can make stripes with linear-gradient) we can do the same with conic-gradient. That makes pie charts a pretty solid use case:

But of course, you can get weird too.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s