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 IconSlash IconGoogle G Icon
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Animated gradient text is like the poster child of AI right now. Gotta have that animated gradient text sparkle button thingy to be cool.

So here! Steal the recipe.

10 mentions #

101likes
8reposts
  • Roni Laukkarinen
  • Alexis Deveria
  • Brecht De Ruyte
  • Jack Iakovenko
  • @joellesenne.dev
  • Craig Webb Art
  • Marcell Ciszek Druzynski
  • Murat Çorlu

Join the conversation on

@argyleink surprise surprise, it doesn’t work on iOS Safari. ????

Really cool effect when it does work though. ????

Amadeus MaximilianAmadeus Maximilian

@argyleink the gradient is animating, so I think that part is working, it’s the text-clipping that is broken (i.e. I see the animated gradient as a rectangle, but not the text). ????

Amadeus MaximilianAmadeus Maximilian
????
CæsarCæsar

@amxmln @argyleink it's the --webkit- prefix on the (now standard) background-clip property

Henry Bley-VromanHenry Bley-Vroman

@argyleink what's the motivation for choosing`--webkit-text-fill-color` over `color`

Henry Bley-VromanHenry Bley-Vroman

@olets @argyleink yeah removing the prefix seems to do the trick. ????

Amadeus MaximilianAmadeus Maximilian

@argyleink at least Chrome, FF, and Safari def support `color: transparent`

Henry Bley-VromanHenry Bley-Vroman
Into the notes app you go
JoeJoe
Gradients are so overdone. Time to come up with a new idea.
Jon CrowellJon Crowell
Amazing ????
Aatif SohelAatif Sohel