Adam Argyle

Found these pics in a drawer and thought it'd be fun to share the journey of creating a CSS spec compliant gradient generator in 2023.

gradient.style
A CSS5 HDR color enabling gradient tool

Can even visualize effects using shorthands and DX tricks.

Here's a sketch of a linear gradient line. The top left image shows a triple color stop gradient, where the 2nd gradient stop uses the double position syntax to spread over more of the line than the other colors.

I'll be calling the colors in a gradient a color stop 🤓

There's also a depiction of transition hints and an inline color adjuster concept. I hadn't quite figured out how the color picker would work yet.

This next concept shows the sketched linear gradient line concept being tested with angles and various syntax.

Putting the concept to the test essentially! Testing how transition hints and double stop positions might work in practice.

Coding was the only way to fully test the solution, but still fun to see how far I could get on paper.

Here's some conic and radial gradient line concepts.

Here are some concepts and depictions of the colors (or stops as I'll start referring to them as) on a gradient line.

Some more concepts of a color picker overlay too.

Stops can have 2 positions on the line, a start and end. Most people don't know this! I chose to visualize it by splitting the cirle into halves, each half representing a stop position.

Any 2 stops also have a transition hint between them, which is a value that indicates how the stop should transition to the next stop.

Here's more sketches of colors and hints. I have no idea what that math calculation means anymore.

These are more sketches testing out various gradients and their estimated visualizations.

The UI needs to show a layers list view (which I still plan to enable more layers!), a gradient canvas preview, a color stops list view and the CSS output for copying.

I think a ✓ meant I liked the overall thumbnail idea.

Here's a quick video of a basic, responsive, 2 stop gradient line with a custom transition hint; shown on each linear, radial and conic overlay.

Sketches lined up pretty good!

Well, I'm not done with it yet! I do want to add layers and background-image sizing. I think it'd make it the perfect tool for finely crafted gradients. Stay tuned!

Ep #151
DevTools FM

Join Andrew, Justin and I for a chat about some of the developer tools I've worked on.

Listen · Watch · Subscribe

You might be asking yourself, "a CSS talk at a JS conf?". Emphasis on CSS, at JS. WTF?

While that's a decently common thought, it's also decently incriminating!

People be installing React packages to do a single line CSS feature.Scott Tolinski - X

That might be you.

Watch me at CascadiaJS to not be that dork.

The browser is Orion, built by Kagi.

On first try it felt like it was taking inspiration from Arc. It's even got the hotkey for copying URLs like Arc (which I use all the time) and the sidebar tabs option. But, unlike Arc, which ships with Zaps and Chrome Extension support, Orion ships with a certain Chrome Extension pre-installed: VisBug!

I always wanted a browser to ship with tools for designers! This is rad!

Here's a preview of what it's like in Orion to use the "Design Tools":

Thanks for the tip Kilian!

I wanted to take a quick stab at my own LLM chat interface, see how far I could get and how many little details I could squeeze in.

View source or just try it

How about that cool new Codepen 2.0 editor?

I kept the demo minimal, no libraries, no frameworks, no build tools; just brick by brick, line by line, articulated details I wanted. Start with some core primitives, then start solving UX problems until the experience is good. There's still a lot more to do! The basic light/dark theme turned out pretty cool tho.

I used a real streaming LLM API, then used View Transitions and Scroll Driven Animations where applicable. I also wanted to learn ReadableStreams and have my own expression of how the UI could work.

On submit, the textarea is given a view transition name with a unique incrementing index, then view transition is called and the same name is given to the new message element that's appended into the chat container.

This creates the morph effect since the old state is the textarea and the new state is the message bubble.

The border shine effect animation draws the eye from the placeholder text to the submit button, while creating a nice sleek design aesthetic.

I used my own technique for it that was wayyy smaller than similar techniques done in popular libraries. The border radius makes the effect tricky to implement, but I've got a handy dandy notebook entry that's got all this laid out for me.

The trick is specifying which box on the node to paint into, like padding-box or border-box. While drawing a solid color over the middle / padding-box. Then as the background is animated, the 130deg shine gradient is shown only over the border-box.

There's also a neat little trick in there with color stop positions.

I thought the blinking cursor was cool. It's a throwback to the 80s and also just feels right since the machine is typing back to you.

It's probably been done other places, but of all the little loader thingies I made, this one was the simplest and most effective. High five to iteration.

There's over 100 little decisions in the code that total up to this experience, and I could make 100 more! But… this was only meant to be a short sprint and not something I'm maintaining or looking to make 1000% fantastic.

Thought it was pretty cool for 2 short bursts of work with kids crawling all over me.

Ep #672
The Working Draft

With Schepp, Vanessa and me 🙂 Join us for a tour of of what’s new and what’s next in CSS.

Listen · Watch · Subscribe

A small sample of UI, code, tools, and design

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!

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

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.

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

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

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.

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

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

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.

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

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.

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

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.

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.

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

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

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:

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.

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

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.

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.

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

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.

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

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

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

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

The lovely scrollSnapChanging event is perfectly fit for this task.

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

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.

It's an honor to speak at CSS Day, the biggest CSS conference every year.

Hope y'all enjoyed nerding out about making beautiful scroll experiences.

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