RSS FeedTwitterMastodonShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
A orange and purple gradient sun with a striped mask on the bottom half
A series of images of an avatar doing a bunch of skateboard tricks.

Retro Wave Gradient

5 min read
css

The mask for this circle gradient is a set of gradient hard lines. As the visible area increases from the bottom, the 7 lines of invisible area decreases.

A receding hard line (like receding hair line.. get it‽)

The #CSS Math and Magic ™️ is that hard lines are made easy (IMO at least) with gradient color hints. And the visibility and invisibility math is relative (changes of ±1%) but exist along an absolute percentage length.

.retro-wave {
  background: var(--gradient-1);

  mask: linear-gradient(
    to top,
    #000 1%,     /* 1% visible */
    0%,          /* hard line */
    #0000 8%,    /* 7% masked */
    0%,
    #000 10%,    /* 2% visible */
    0%,
    #0000 16%,   /* 6% masked */
    0%,
    #000 19%,    /* 3% visible */
    0%,
    #0000 24%,   /* 5% masked */
    0%,
    #000 28%,    /* 4% visible */
    0%,
    #0000 32%,   /* 4% masked */
    0%,
    #000 37%,    /* 5% visible */
    0%,
    #0000 40%,   /* 3% masked */
    0%,
    #000 46%,    /* 6% visible */
    0%,
    #0000 48%,   /* 2% masked */
    0%,
    #000 55%,    /* 7% visible */
    0%,
    #0000 56%,   /* 1% invisible */
    0%,
    #000 57%     /* visible til end */
  );
}

Def loop worthy right? Took longer to write the comments then it did the code.

See how those color hints (aka "transition" hints) bottom out the fade between the colors black and transparent? Then each color just needs to consider how how long it is. I felt it was helpful to think of it like that at least.

How would you do this?

Here's the snippet unexpanded, fer the takin'!

mask: linear-gradient(to top, #000 1%, 0%, #0000 8%, 0%, #000 10%, 0%, #0000 16%, 0%, #000 19%, 0%, #0000 24%, 0%, #000 28%, 0%, #0000 32%, 0%, #000 37%, 0%, #0000 40%, 0%, #000 46%, 0%, #0000 48%, 0%, #000 55%, 0%, #0000 56%, 0%, #000 57%);

Mentions #

Join the conversation on

135 likes
13 reposts
  • Francis
  • dannymasao
  • Fifty Shades Of Cheh
  • Jem Young
  • Andy Bell
  • Sayz Lim
  • Dan Harris
  • Ellyll
  • Dohány Tamás
  • Pako G
  • ja.nz
  • John Hooks
  • bigandy

Member of a CSS Webring

Try a site in the ring!
PreviousRandomNext