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

Add a rainbow shadow effect with hue longer interpolation and a little bit of blur().

Try it in this Codepen

A black button with a rainbow blurred shadow behind it

13 mentions #

74likes
7reposts
  • Eana Hufwe
  • Johannes Odland
  • David ‮ yensiR
  • Carlos [ファンタジー]
  • Konstantin Dankov
  • mogita
  • Lewlew

Join the conversation on

Shame it's not supported on Firefox yet ???? all I could see was a boring button ahah
Filipe FreireFilipe Freire

@argyleink omg I want this on all my sites

HiddeHidde
These are sad and colorless times... ????????
Filipe FreireFilipe Freire
Can confirm! Sad times are a distant past now! ????
Filipe FreireFilipe Freire
I thought a little bit of animation wouldn't hurt codepen.io/felds/pen/zx... PS 1: replacing linear-gradient with repeating-linear-gradient crashes the tab PS 2: I just found out that animating gradients using background-position-x is surprisingly tricky!
FeldsFelds
Whoa… how is the gradient so bright and vibrant? On my phone it pops like crazy. It almost feels brighter than the white around it. How is that possible?
Steve AdamsSteve Adams
Ahhh okay, so here in Chromium land I'm stuck in the dull, lifeless colourscape of yesteryear. I'm using Arc. Every day I find new reasons to regret it
Steve AdamsSteve Adams
I don't know how much other browsers support HDR, Safari did since quite a while ago on some displays but sometimes newer versions of browsers can break features. (& sometimes rivalry between big tech companies lead to breakage.) There's also a whole spec for all of this: www.w3.org/TR/css-color...
Thomas ????️????Thomas ????️????

pairs well with some video game metal music by Rainbowdragoneyes

https://open.spotify.com/artist/4E6WEkrsnOJUSFn83fdyIS

Rainbowdragoneyes
Adam Argyle :chrome:Adam Argyle :chrome:
Is there a particular reason for specifying "trim-both" when it's the default value? a habit?
CSS by T. AfifCSS by T. Afif
That’s sweet!
Isaac (Aye) DTIsaac (Aye) DT
Reminds me of this ancient post I did to implement rainbow borders! weston.ruter.net/2009/06/15/m...
Weston RuterWeston Ruter

@argyleink You can rotate the hue with a registered custom property, it's super pretty.

Sam :neofox_heart:Sam :neofox_heart: