< Back to Frontend Friday Folks Index

Pokeball

Highlighted solution (349 characters)
1 
<style>
2 
  &{
3 
    background:
4 
      radial-gradient(circle, #F6DF96 25px, #781728 0 35px, transparent 0),
5 
      linear-gradient(to right, #6CB3A9 110px, #781728 0 290px, #6CB3A9 0) 0 50% / 100% 20px no-repeat,
6 
      radial-gradient(circle, transparent 100px, #6CB3A9 0),
7 
      conic-gradient(#D25B70 25%, #FFFFFF 0 75%, #D25B70 0)
8 
    ;
9 
  }
10 
</style>
11

I've done this puzzle in the official CSSBattle Discord to help people understand how gradients work. I've tried not to code golf, but I've mentioned a couple of tricks they may see when people are using gradients in the top solutions.

One of them being the 0 as the first number behind the colors, essentially meaning "directly at the latest color stop, start this". Or the & sign in the beginning referencing the implicitly generated html tag.

< Back to Frontend Friday Folks Index