CSS and design systems people - BlogFlock

Sizzle Rizzle - Adam Argyle

2025-07-04T21:20:40.000Z

A small sample of UI, code, tools, and design from my 20 professional years of webdev.

Fathers Day 2025 - Adam Argyle

2025-06-15T18:10:04.000Z

Happy Father's Day to other parentNodes

Nintendo Switch Homescreen recreated with CSS and a li'l bit of JS - Adam Argyle

2025-06-13T22:16:31.000Z

Someone across the room could hear the sounds from a device and know that it's coming from a Nintendo Switch.

Just the audio alone is iconic; but that homescreen layout and scroll experience, :cheffs-kiss:

Let's remake it with CSS!

light/dark theme + forced colors support
automatic scroll UX upgrades based on user's browser capabilities
keyboard, mouse, touch, allllll good

See the Pen by Adam Argyle (@argyleink) on CodePen.

This is 1 of 3 scroll experiences I taught at CSS Day 2025. What a lovely conference!

HTML #

Structure #

I've found the following "3 element structure" for a scroller to help prevent headaches and gotchas across browsers. The structure supports you both in styling, interactions, and container queries.

.scroll--root: highest level container for the scroller, may have borders or spacing styles
.scroll--viewport: the element with overflow, containment and scrollbar styles
.scroll--content: wrapper to aid in cross browser padding oddities or other impacts that an overflow container may apply to children

<section class="scroll--root">
  <div id="scroller" class="scroll--viewport">
    <ul class="scroll--content">
      /* your content */
    </ul>
  </div>
</section>

CSS #

Essentials #

These are the things you should always put on your scroller:

use the overflow shorthand and set both axes to prevent surprises
overscroll-behavior should always match the scrolling axis
padding and scroll-padding should always match
smooth scroll-behavior if the use is ok with motion

.scroll--viewport {
  overflow: auto hidden;
  overscroll-behavior-x: contain;

  padding-inline: var(--size-8);
  scroll-padding-inline: var(--size-8);

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

See the @layer lessons.essentials in the demo for more comments.

Containerization #

Since a scroller of often extrinsically sized, it won't suffer from the side effect that container queries can cause (where they collapse). This makes scroller and container queries a natural pair.

container shorthand lets me set the name and the type(s) in one spot
container queries for children to use to ask this container questions about the width and height while also providing a context for container query units like cqw
scroll-state for children to ask about which game is snapped

Plus, scroll-state queries on the scroller and on the snap items are meaningful and worth setting up while we're here.

.scroll--root {
  container: --homescreen / size;
}

.scroll--viewport {
  container: --homescreen-scroller / size scroll-state;
}

.scroll--content > li {
  /* children will use snapped scroll-state() */
  container-type: scroll-state;
}

See the @layer lessons.containerize in the demo for more comments.

Snapping #

Meaningfully, the Switch scroller snaps the scroll items to the left, in line with the layout grid. We can do this in CSS with just a couple styles.

Since the scroll-padding already matches the inline padding, the snapping here will match the alignment perfectly.

.scroll--viewport {
  scroll-snap-type: x mandatory;
}

.scroll--content > li {
  scroll-snap-align: start;
}

See the @layer lessons.scroll-snap in the demo for more comments.

Overscroll effect #

It's common for scrollers to offer an effect if you've reached the beginning or end; an overscroll effect. The most common is an elastic effect, like a rubber band is tight and preventing you from going further and when you let go it snaps back. We can do this with CSS scroll snapping.

Here's a moment where wrapping all your content in a .scroll--content container is valuable. The overscroll amount is the size of an invisible item at the beginning and end of the scroller. The browser will let you scroll to them, but since they won't have scroll-snap-align set and the scroller itself has x mandatory set, the scroller will never rest on these invisible overscroll spacers.

The inline-start spacer will be 25cqi, offering a 25% overscroll vibe
The inline-end spacer will be larger at 90cqi, ensuring the last game can be snapped to the start

.scroll--content {
  display: flex;

  &::before,
  &::after {
    content: "";
    display: block;
    inline-size: 25cqi;
    flex-shrink: 0;
  }

  &::after {
    inline-size: 90cqi;
  }
}

See the @layer lessons.overscroll-effect in the demo for more comments.

Scroll Animation #

This was a personal addition, not part of the original Switch homescreen design.

It's subtle; fade out the game you just scrolled past. Leave a hint or peek of it, but dim it out. This reduced cognitive load and helps the eye maintain the alignment of the snapped game to the grid.

Here's the simple keyframes.

@keyframes leaving-scroller {
  to {
    opacity: .2;
  }
}

Here we use the keyframes on a game if the browser supports the feature, and I clamp the keyframes with animation-range to only run as the element exits the scrollport.

.game {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view(x)) {
      animation: leaving-scroller linear both;
      animation-timeline: view(x);
      animation-range: exit 50% exit 100%;
    }
  }
}

See the @layer lessons.scroll-animation in the demo for more comments.

Scroll State #

Here we'll use the scroll-state containerization work from an earlier lesson. Two things occur when a game snaps into place:

the pulsing blue focus outline highlights the game and animates forever
the title of the game slides up

By default I chose to always show the game titles, only applying the animation effect if the browser understands scroll-state queries.

Here's the keyframes for when a game is snapped:

@keyframes game-focus {
  from {
    outline-color: hsl(200 100% 50%);
  }
  to {
    outline-color: hsl(200 100% 80%);
  }
}

The game image uses the keyframes when it's parent .game parent container is snapped on x, and the image title slides down when it's parent game is not snapped.

.game {
  img {
    @container scroll-state(snapped: x) {
      outline: 5px solid blue;
      outline-offset: 5px;
      animation: game-focus .5s var(--ease-3) alternate infinite;
    }
  }

  figcaption {
    @media (prefers-reduced-motion: no-preference) {
      z-index: -1;
      transition:
        translate .5s var(--ease-spring-2) .2s,
        opacity .5s var(--ease-3) .2s;

      @container not scroll-state(snapped: x) {
        translate: 0 50px;
        opacity: 0;
      }
    }
  }
}

See the @layer lessons.scroll-state in the demo for more comments.

Colorization #

The goal of this section is to match the Switch Homescreen's scroller style with ::-webkit-* scroll features, while also providing a meaningful fallback with scrollbar-color. In addition to integrated colors and sizing, I also add a few interactive moments like when a keyboard is focused inside the scroller, or a mouse is hovering the thumb.

Integrate scrollbar colors into the adaptive light/dark/forced colors themes
Add hover and focus "hints and feedback"

Look at how cool the forced colors styles are. Transparent borders are your friend!

Compare that with the light and dark styles:

It takes a lot of selectors and styles to do this robust colorization, here's the chunk that does the work.

.scroll--viewport {
  &:is(:focus-visible, :focus-within) {
    outline-offset: -2px;
    outline: none;
  }

  &::-webkit-scrollbar {
    height: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #0000;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-thumb {
    background: color-mix(in srgb,
      light-dark(
        var(--surface-4),
        var(--surface-2)
      ),
      #0000 50%
    );
    border-radius: 1e3px;
    border: 3px solid var(--surface-1);
  }

  &:is(:focus-visible, :focus-within)::-webkit-scrollbar-thumb {
    background: var(--link);
  }

  @media (hover) {
    &::-webkit-scrollbar-thumb:hover {
      background: light-dark(var(--surface-4), var(--surface-2));
    }

    &::-webkit-scrollbar {
      opacity: .5;
    }

    &::-webkit-scrollbar:hover {
      opacity: 1;
    }
  }

  @supports (-moz-appearance:none) {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-4) #0000;
    transition: scrollbar-color .3s ease;

    &:is(:focus-visible, :focus-within) {
      scrollbar-color: var(--link) #0000;
    }

    @media (hover) {
      scrollbar-color:
        color-mix(in srgb, var(--surface-4), #0000 50%)
        #0000;

      &:hover {
        scrollbar-color: var(--surface-4) #0000;
      }
    }
  }
}

See the @layer lessons.colorize in the demo for more comments.

Content Introduction #

Finally, on load, introduce the content from the right, providing the hint that there's directionality in this games list, hinting at scroll.

The star of this effect is @starting-style.

.scroll--content .game {
  @media (prefers-reduced-motion: no-preference) {
    transition: transform 1s var(--ease-spring-2);
    transition-delay: calc(var(--i) * .05s);

    @starting-style {
      transform: translateX(100vw) translateZ(calc(var(--i) * -1px));
    }
  }
}

See the @layer lessons.loading-animation in the demo for more comments.

JavaScript #

Iconically, the Switch homescreen has both haptic and audibal feedback for your interactions, specifically to the scroller.

Snap "click" when the scroller rests on a game
Pop sound as each game passes by the snap area
Haptic feedback as a game passes over the snap area
Ability to tap to snap

Preload #

First let's preload the sounds so they can play instantly at first.

const sounds = {
  snap: new Audio('https://assets.codepen.io/2585/snap.mp3'),
  pop: new Audio('https://assets.codepen.io/2585/pop.m4a'),
}

Tap to snap #

If a user clicks a game, scroll it to the snap position.

scroller.onclick = event => {
  let target = event.target.closest('.game')

  if (target) {
    scroller.scrollTo({
      left: target.offsetLeft,
      behavior: 'smooth'
    })
  }
}

Vibrate and pop #

The lovely scrollSnapChanging event is perfectly fit for this task.

scroller.onscrollsnapchanging = event => {
  navigator?.vibrate(50)
  sounds.pop.play()
}

Snap #

The complimentary scroll event scrollSnapChange is perfectly fit for reporting scroll has ended and it's rested on a new snap target.

scroller.onscrollsnapchange = event => {
  sounds.snap.play()
}

Outro #

You made it, which means you definitely picked up some new tricks. Go forth and make great scroll experiences!

I'll share a link to the talk if/when it comes out, which provides a lot of commentary on these decisions and styles. But also, in case it wasn't clear in the blog post, check out the demo for all the comments, they should help connect all the dots.

Prefers Reduced Transparency - Adam Argyle

2025-06-10T20:38:27.000Z

It's not a challenge to design for reduced transparency, it's an opportunity.

CSSday 2025 - Adam Argyle

2025-06-05T05:34:55.000Z

Speaking in just a couple hours 🤘🏻💀

The Slides · Codepen Collection

Off To CSS Day 2025 - Adam Argyle

2025-06-02T01:53:53.000Z

Off to CSS Day; see ya there‽

Mt Rainier Boat Banjo - Adam Argyle

2025-05-29T03:58:04.000Z

Mt. Rainier in the bg, on a friend's little personal website boat, playin banjo tunes in double C:

Vibe check? This is the way.

Those annoying long URLs causing overflow? - Sara Joy

2025-05-22T15:06:00.000Z

A short thort

The End of Everything - Robin Rendle

2025-05-21T16:56:41.000Z

Here’s an eye-opening snippet from Katie Mack’s excellent book The End of Everything (Astrophysically Speaking):

The expansion of the universe as it is occurring today more than just stretch out the light of distant galaxies. It also stretches out and dilutes the afterglow of the Big Bang itself. One of the strongest pieces of evidence for the Big Bang [...] is the fact that we can actually see it, simply by looking far enough away. What we see, specifically, is a dim glow, coming from all directions, of light produced in the universe’s infancy. That dim glow is actually a direct view of parts of the universe that are so far away that, from our perspective, they are still on fire—they’re still experiencing the hot early stage of the universe’s existence, when every part of the cosmos was hot and dense and opaque with roiling plasma, like the inside of a star. The light from that long-burned-out fire has been traveling to us all this time, and, from sufficiently distant points, has just now arrived.

Tag, I'm It - Adam Argyle

2025-05-12T15:21:30.000Z

Killian tagged me in this blog chain letter type thing to answer some questions about blogging. I accept 🙂

Why did you start blogging in the first place? #

My first exploration into blogging was Wordpress, I called it Geek Devigner. I wanted to share about the cross of development and design (devigner). I didn't write on it much, I was still making mostly Flash and jQuery stuff. Needless to say, this wasn't a super popular topic to be blogging about.

Later I wrote posts on Medium or Devto. This was mostly during the JAMstack wave, and I was really intent on optimizing the build systems so Jade was only rendering the render trees that changed all while making my own isomorphic framework. I also like Grunt more than Gulp, so again, this wasn't a super popular topic to be blogging about.

After blogging and writing articles at Google, I wanted to write in my own voice and showcase CSS features while talking about CSS features. I figured most people these days are scrolling cards and like content feeds, so I modelled my site after these interactions and started blogging about CSS, Javascript and HTML stuff consistently for the first time.

What platform are you using to manage your blog and why did you choose it? #

My current site/blog is built on Deno and their Fresh framework. I blogged about it here.

For me it was a decently minimal set of features that Fresh brought while Deno brought a small, safe, web standards focused server.

I wanted to do lots of custom things, so I needed something that wasn't going to be in the way. I wanted to make something server first, a bit more socially integrated than previous static sites I'd built, and to try out islands front-end architecture.

How do you write your posts? #

I write posts in a markdown file with some custom frontmatter. Notes have slightly different frontmatter than blog posts, otherwise they're the same.

I've written all my own adapters for images, code snippets and videos. The images are swapped for a <picture> with optimised sources. The code snippets are rendered server side. Videos are also optimized, given poster images, and other cool stuff.

All of this is done in a code editor. Currently Zed, but often Windsurf, Sublime or VS Code (I flop around alot, but usually go back to Sublime for the nicer text rendering and bootup speeds).

If I need any special examples or interactives, I either write an inline style or script tag, or make a web component.

When do you feel most inspired to write? #

When reading my RSS feed. But, that's not when I write… that's once the kids are asleep.

Do you publish immediately? #

Longer form posts definitely simmer or chill in a branch for a while. Shorter form posts though, those can be authored and published in just a few minutes. I needed to have both opportunities, was important to me that both types of thoughts could be posted to my site.

What are you generally interested in writing about? #

CSS, almost exclusively. However, every once in a while I'll share a JS tip (which is usually CSS adjacent).

What’s your favourite post on your blog? #

There's a few that come to mind, but the winner is Headless, boneless and skinless UI. I liked how the piece came together around Halloween when the content was totally morbib sounding out of context.

Who are you writing for? #

UI and UX engineers, a few designers and other folks who want to stay up to date on CSS. Mostly writing for professionals or experts, but do try to make things minimal to reduce learning friction for everyone.

Any future plans for your blog? #

I've got quite a long list of features in the backlog.

I'd like to add a bunch more "slashers", which are just cool slash pages like /follows and /404. So far I've got /talks, /experiments, /avatar, /toolkit, and /links in the backlog.

I've got the personas already, but I want to give them their own profile pages with all their specific posts. They'd also get their own RSS feeds 😉

The most notable backlog item, is to have Balatro style powerups and "shiny" type effects for the cards on the home feed. Just a little piece of frontmatter that adds a class to the card, then CSS does the rest: makes a post foiled, or cracked, or holographic. Be so fun to make.

Who am I going to tag? #

Maybe you? Anyone out there want to be tagged?

I'll tag you right here.

Kandidaatstelling voor AB - Hidde's blog

2025-05-01T00:00:00.000Z

Mijn naam is Hidde de Vries, specialist standaarden bij Logius (deel van de Rijksoverheid). Hierbij vraag ik om je stem voor mijn verkiezing in het Advisory Board van het W3C.

Mijn enthousiasme voor het web gaat zo'n 20 jaar terug, toen ik op de middelbare school mijn eerste website maakte. Wat een mooi platform! Sinds die tijd werkte ik onder andere als webontwikkelaar en specialist digitale toegankelijkheid, waarbij ik vaak bruggen bouwde tussen beide beroepsgroepen.

Bij het W3C was ik al eens onderdeel van het Team (bij WAI, 2019-2022), waar ik onder andere aan informatie over toegankelijkheid werkte en aan de WCAG en ATAG Report Tools. Momenteel ben ik actief in de Open UI Community Group, verschillende toegankelijkheids-gerelateerde Working Groups en de Web Sustainability Interest Group.

Als ik word verkozen wil ik:

interactie met het AB verbeteren: door meer contact te zoeken met Members en de bredere community, om te zorgen dat hun inbreng terugkomt in ons advies, en door te zoeken naar consensus rondom bestuurlijke vraagstukken tussen Board, TAG, Members en verschillende werkgroepen.
het W3C aantrekkelijker maken: mensen komen nu al naar W3C om aan webstandaarden te werken. Maar we kunnen een grotere groep bereiken als we onboarding verbeteren. Ik wil uitzoeken wat mensen nu tegenhoudt om te beginnen en met die informatie verbeterslagen maken.
een nieuw geluid inbrengen: ik ben niet echt nieuw in de W3C community, maar ik ben vrij nieuw in het bestuurlijke deel. Ik hoop dat die verse blik waardevol gaat zijn voor een AB dat op zoek is naar een nieuwe identiteit en missie.
de gebruiker centraal stellen: bijna te voor de hand liggend om te vermelden, gebruikers staan immers al centraal in de W3C Vision, maar in de praktijk kan het gebeuren dat zaken als toegankelijkheid, internationalisatie en privacy het onderspit delven. Er is kennis van zowel techniek als gebruikers nodig, en ik wil die van mij inzetten om processen te verbeteren.

Wat ik wil bijdragen, in willekeurige volgorde:

specialisme in webtoegankelijkheid (langere tijd) en duurzaamheid (sinds kort). Ik leer snel en duik graag in nieuwe dingen.
gewerkt in verschillende sectoren die het web nodig hebben en gebruiken: overheid, een browsermaker en de maker van een authoring tool (CMS).
veel ervaring met communiceren over standaarden richting technische communities, met name de web developer community. Ook meerdere congressen georganiseerd.
eerdere ervaring bij W3C, als Invited Expert, Member en Team.
recente ervaring met en diepe technische kennis van web development.
achtergrond in filosofie en (kort) kunstmatige intelligentie, ik neem dus het perspectief van de geesteswetenschappen mee, niet alleen een technische blik. Ik kan daardoor ook goed kwesties van meerdere kanten bekijken.

Voor vragen: stuur me gerust een berichtje op W3C Slack of email me op hidde@hiddedevries.nl.

Originally posted as Kandidaatstelling voor AB on Hidde's blog.

Reply via email

Running for the AB - Hidde's blog

2025-05-01T00:00:00.000Z

My name is Hidde de Vries, accessibility standards specialist at Logius (part of the Dutch government). I would appreciate your support of my running for the W3C's Advisory Board.

I fell in love with the web ever since I built my first website in high school, almost 20 years ago. What a cool platform to build for! Since then, I worked professionally as a web developer and accessibility specialist, often building bridges between these fields.

At the W3C, I've been a member of the Team (at WAI, 2019-2022), where I worked on accessibility guidance, authoring tool accesibility, the WCAG Report Tool and the ATAG Report Tool. I'm currently a participant in the Open UI Community Group, various accessibility-related Working Groups and the Web Sustainability Interest Group.

If elected, I want to:

help improve what engagement with the AB looks like, by doing more outreach to Members and the wider community, to ensure their input is represented in our advice, and by working to find consensus on governance issues between Board, TAG, Members and groups.
make W3C more attractive; people go to the W3C for web standardisation today, but we can reach more potential if we improve onboarding. I want to find out what stops people from getting started or engaging with our work and use that to make improvements.
bring fresh perspective on the future; though I can't say I'm new to the W3C community, I am new to most governance aspects of it. My hope is this fresh perspective can be an asset to an AB that is orienting towards a new identity and mission.
advocate for users, the primary constituents of the web. Almost too obvious to call out, as users are central to the W3C vision, and who else would we advocate for? In practice, though, user needs around accessibility, internationalisation and privacy are easily overlooked. They require matching up (deep) technical specifics with user needs. I want to use my experience with both to help improve the process.

What I'd like to bring to the AB, in no particular order:

specialism in web accessibility (for long) and web sustainability (as of recently). Also a fast learner happy to dive into things I'm not specialised in.
worked in a broad range of sectors that use and need the web: public sector, including government, a browser vendor and an authoring tool vendor.
proven record of communicating about standards development to tech communities, the web developer community in particular (see my blog and talks). Also co-organised developer conferences.
previous experience at W3C, as an Invited Expert, Member and Team.
hands-on experience and deep technical knowledge of web development
background in Philosophy and (briefly) AI, meaning I could bring a humanities perspective and not just a technological view, and that I am trained to view issues from many angles.

Any questions: feel free to reach out via W3C Slack or email me on hidde@hiddedevries.nl.

Originally posted as Running for the AB on Hidde's blog.

Reply via email

WebDev Challenge - S2E2 - Adam Argyle

2025-04-29T15:45:22.000Z

What could you create if you had 30 minutes to plan and 4 hours to build? Me, Lane Wagner, Sarah Shook, Nikki Meyers, Shashi Lo, and Nick Taylor took on the Web Dev Challenge to find out.

They picked the Napoleon Dynamite thumbnail for Lane and I 🤣

The Challenge #

We lucked out and got a rad one.

Single player, multiplayer, cooperative, competitive, or something totally different — your challenge is to come up with something fun that is played across at least two devices.

Temporal’s workflow tools will allow you to manage sending information between devices dependably.

Lane and I def leaned into the "fun" portion of the challenge.

We chose to try a game that uses the camera video stream API to feed faces to Media Pipe (locally running a face detection machine learning model) to flap a bird's wings in a flappybird-like game.

A Temporal workflow will capture the game round and let us see all the player moves.

At least that's what we planned on…

The Teams #

These were the lovely folks I got to spend 4 hours with:

Sarah Shook && Nikki Meyers
Shashi Lo && Nick Taylor
Lane Wagner && I

The Tools #

Temporal was pretty cool, but as you'll see in the video… we um, didn't figure that out til a bit later.

I did get the pleasure to use a BenQ RD280U tho.

The 4k 3:2 matte UHD display was really nice. They say it's made for coding, and I see what they mean.

Plus, HDR content is awesome, and I could capture high quality UI captures and place lots of windows around.

I got to take one home and try it out. It's light years ahead of the one I had before.

The arm is super strong. There's tons of charging ports. It's a really great product.

3D Bird #

Here's that 3D bird Codepen that's featured in the episode.

See the Pen by Adam Argyle (@argyleink) on CodePen.

The Results #

There were no winners or losers!

We all had a blast; I'm lookin forward to seein the YouTube comments, maybe a 3D bird joke or two.

Zen Garden Leave - Adam Argyle

2025-04-23T17:21:16.000Z

CSS Zen Garden Leave…

Taking time, breathing slow, clearing my head, tending to a brutalist garden on Codepen.

Seems appropriate.

Carousels On Shoptalk - Adam Argyle

2025-04-07T14:21:51.000Z

CSS ::scroll-button(), ::scroll-marker, Carousel Configurator, and Carousel Gallery with Chris and Dave on ShopTalk Show.

Watch · Listen · Read

CSS Can Do That At Smashing Meets - Adam Argyle

2025-04-05T18:12:17.000Z

Recording is live!

Watch CSS Can We Do That on YouTube via Smashing Meets CSS online event.

CSS Mixins are ready for experimentation! - Adam Argyle

2025-03-26T14:43:21.000Z

CSS Mixins and Functions are both ready for you to hack on 🤯. I think of functions as returning a value and mixins as a way to apply a chunk of styles.

Bramus has a great intro on @function, don't miss it. But this post is about @mixin, don't miss the explainer, it is packed with valuable information:

@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

and using it:

.box {
  @apply --box;
}

Getting started #

For CSS Mixins as of writing this, you'll need Canary and you'll need to launch it from the command line with this flag CSSMixins:

open -a "Google Chrome Canary" --args --enable-features=CSSMixins

Go make stuff! #

You have all the latest information now:

how to enable Canary to understand mixins
what the basic syntax is like
links to more advanced examples and documentation

Customize A Select - Adam Argyle

2025-03-24T21:22:23.000Z

Get ready! The <select> element can now be customized with CSS, check out the post on the Chrome Blog!

Finally render custom HTML inside an <option>
Works without JS
Easy to progressively enhance

CSS Carousel In Chrome 135 - Adam Argyle

2025-03-20T16:26:21.000Z

We just announced how CSS can make carousels on the Chrome Blog!

Incredible accessibility
Works without JS
Builds upon regular scrollers

CSS Carousel Configurator:
I made this so you can directly see the relationship of a feature you want and the related CSS.

CSS Carousel Gallery:
Showcases meaningful use cases and exemplifies how to orchestrate many capabilities together.

Rainbow Shadow Button - Adam Argyle

2025-03-19T15:42:28.000Z

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

Try it in this Codepen