RSS FeedTwitterMastodonShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
Three example states of the chart
My google avatar.

Circular gradient stroke chart

3 min read
css

CSS masks and gradients are so rad, there's so much you can do with them.

This trick uses two gradients;

  1. a radial gradient mask, hiding the inner part of the conic
  2. a conic gradient, visible up to the angle, then transparent

Let's see some code #

Start with making a square, so it's easy to make a circle.

#pie {
  aspect-ratio: 1;
  inline-size: 50vmin;
  border-radius: 50%;
}

Now add the mask and conic gradient. Comments are inline as to why or what each part is doing.

#pie {
  --ng: 120deg; /* can be set via slider */
  --thickness: 3px;

  --_inner: calc(70% - var(--thickness));
  --_outer: calc(var(--_inner) + 1px); /* fixes aliasing */
  
  /* hides the inner part of the conic gradient/element */
  mask: radial-gradient(circle, #0000 var(--_inner), #000 var(--_outer));
  
  /* gradient up to --ng, transparent after --ng */
  background-image: conic-gradient(deeppink, cyan var(--ng), #0000 0);
}

The conic gives us the smooth gradient and the angle, while the mask and overall element shape, isolate a thin line of visibility into the conic gradient, completing the illusion.

Try it #

The Codepen hooks up a slider to the angle and some text, to help debug and control the effect.

Mentions #

Join the conversation on

428 likes
54 reposts
  • 날고로케몰라
  • あだち@webデザイナー
  • Nishanth prabhu
  • Clément Ducerf
  • Pradeep Karn Rajput
  • JSConf.Asia
  • Chinese SpyBalloon
  • Leoncio Gutierrez
  • SaltyAom
  • Ст. 122 УК РБ
  • Ismael MoranCarrasco
  • Christopher Moore
  • ❖ Kei ラングレー
  • 🇯 🇺 🇦 🇳 🇵 🇦 🇲🇽
  • uptonking
  • Osᴄᴀʀ Bᴜsᴛᴏs ツ 🏠
  • sometimes
  • DM Kim
  • Nicolas Giethlen
  • johnnycheese99
  • Hussain Asim
  • 쟝장
  • TinyEngines
  • Barka👽
  • Bramus
  • Gregorio Carrillo
  • Евгений Резниченко
  • Fran Zucolota
  • John Miller
  • Abdul Fatir
  • 姓名不能为空
  • Hunt
  • Mr.Anderson
  • z나가던
  • Ashvind Maudhoo
  • J@vys
  • Vadym Stebakov 🇺🇦
  • hemma i stockholm (AVICII) ◢ ◤
  • Francisco Javier Ferreyra López
  • Omar Imran Mousa
  • Mr.Pingouin
  • Alexander Schuster
  • Mohamed Sahel
  • Wonder Dai
  • Robert Vera
  • 学んだことを記録していく犬
  • 𝙏𝙞𝙢 @ easeout.co ⚡
  • Nanderson Castro - Code Experts
  • Daniel
  • Josef Ježek
  • Front end Developer - codesnippets.dev.br
  • Fronteers
  • Cassie.
  • Tom Jenkins

Member of a CSS Webring

Try a site in the ring!
PreviousRandomNext