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 series of images of an avatar doing a bunch of skateboard tricks.
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

17 mentions #

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

Join the conversation on

Rainbow drop shadow? I gotchu. ⤷ nerdy.dev/rainbow-shad...
Adam ArgyleAdam Argyle
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
reload, works now in firefox and safari: none -> 0 i was using "none" for the hue and apparently they're both not up and up on that CSS color value yet woes be gone!
Adam ArgyleAdam Argyle
no more shame! i've updated the impl so all 3 browsers are happy
Adam ArgyleAdam Argyle
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 ????️????
Arc is Chromium, it's got HDR support! however, your hardware may not. it's common now for laptop displays to be HDR capable, but external monitors can still be found as SDR
Adam ArgyleAdam Argyle

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
muscle memory yeah, but I'll start adjusting it to memorize less ty!
Adam ArgyleAdam Argyle
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