RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks Icon
Text emphasized alt text example
A series of images of an avatar doing a bunch of skateboard tricks.2 min read

A conic gradient diamond and okLCH

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 #

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

Crawl the CSS Webring