RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
Text emphasized alt text example
A series of images of an avatar doing a bunch of skateboard tricks.

A conic gradient diamond and okLCH

2 min read
css

You may recognize this diamond, it's certainly inspired by a classic icon: Sketch.

Effect breakdown #

Not sure how much this sketch will help y'all, but it totally helped me:

Two specifically placed conic gradients show as two circles. The bottom one uses transparency to achieve the triangle effect. The top one is simpler but required a clip-path to notch the corners.

I also used transition hints to manage the hard stops. I think most people prefer to use double stop syntax for this, but I've really come to love transition hints.

It's not perfect #

There's a few magic numbers in there. It is responsive and holds it's fidelity, but there's definitely a better way to make this where it's less magic and more geometric. I also think it turned out a little tall.

The colors #

I used the okLCH palettes beta from Open Props for the colors. I knew they'd have all the shades I needed and I also already had a slider demo that let you play with changing the hue. Put it all together on top of this diamond, easy peasy!

Closing thoughts #

I used my recently announced beta tool gradient.style to prototype the positions of the conic gradient. Here is a link to the prototype gradient for the bottom half of the diamond. Hope this tool helps you learn as much as it's helped me!

Mentions #

Join the conversation on

5 likes
4 reposts
  • Björn Berkholz
  • Katy Castillo
  • Lea Rosema
  • Danny Blue

Crawl the CSS Webring?

previous sitenext site
a random site