July 1, 2025 Smashing Newsletter: Issue #514
This newsletter issue was sent out to 189,475 subscribers on Tuesday, July 1, 2025.
Editorial
It’s CSS time! In this newsletter, we dive into new CSS features and techniques, along with a few tools that will help you write maintainable CSS and avoid headaches in debugging — with easing functions, anchoring, if(), drop shadows and CSS bursts. With an upcoming workshop by Stephanie, too!
As a quick reminder: we’ve just announced SmashingConf Amsterdam 2026 🌷 — our brand new conference for designers, UX and UI engineers — all around UX, design patterns, accessibility and design systems. Get your early-bird ticket.
As summer looms, we still have a few friendly online workshops coming up as well:
- SmashingConf Freiburg 2025 🇩🇪 (Sep 8–11)
- Live workshops in Antwerp and Madrid 🇧🇪 🇪🇸 (Sep–Nov)
- UX Strategy with Vitaly Friedman,
- Accessible Typography with Oliver Schöndorfer,
- Free: Smashing Meets AI on AI, design patterns and developer’s workflow.
And I hope you’ll find a bit of time to slow down over the next couple of weeks and crave a bit of time for yourself, and for meeting good and old friends. Wishing you healthy, calm, and peaceful days, everyone! 🎉🥳
— Vitaly
1. if() and reading-flow
Exciting new CSS features have just landed in Chrome 137: if() and reading-flow. Una Kravets recorded a video to give us a quick overview of what they are capable of, with a practical example of what we can use them for.
The new if() function lets us use custom property values and style queries to write logical styles based on property values. The reading-flow property improves keyboard and screen reader accessibility by declaring an intended focus order instead of letting the browser follow the source order of the DOM tree. Finally, a fix for those occasions when visual order and source order mismatch. (cm)
2. CSS Bursts With Conic Gradients
A burst background created just with CSS? It’s possible, as Chris Coyier shows. With gradients now supporting two color stop lengths instead of just one, hard-stops work for conic-gradient() as well — the perfect foundation to create a burst effect.
Chris shares a tutorial on how he created a CSS burst with conic gradients. And he built in some clever effects, too: placing a radial gradient on top of the burst makes room for text in the middle, and laying on more radial gradients, or a repeating radial gradient with transparent color stops, breaks up the gradient’s lines. It’s always impressive to see what can be achieved with just CSS when you think outside the box. (cm)
3. Easing Wizard
Are you struggling with CSS easing functions? No worries; you are not alone. Matthias Martin created a neat little tool to help you make sense of them: Easing Wizard.
Easing Wizard makes it easy to visualize and test how CSS easing functions behave as certain parameters change. It supports Bézier, spring, bounce, wiggle, and overshoot and offers plenty of presets, customization options, and preview modes to see an easing function in action. A fantastic playground for tinkering with easing functions, and once you’re happy with the result, you can copy the CSS or Tailwind CSS to your clipboard with just one click. (cm)
4. Matching Drop Shadows
If you’ve ever tried to implement consistent drop shadows across multiple platforms and design tools, you’ve probably noticed that they don’t look the same. But, good news, it is possible to get them all to match. Marc Edwards did the heavy lifting for you and created a cheat sheet with scale factors to convert to and from the various platforms and design tools.
As Marc points out, position offsets and color all behave the same across CSS, Android, iOS, Figma, and Sketch. The only difference is how the blur radius is handled. Getting it to match perfectly is impossible due to the differences in rendering methods and code, but with the help of Marc’s cheat sheet, you can achieve a very close match. (cm)
5. Upcoming Workshops and Conferences
That’s right! We run online and in-person workshops, be it accessibility, performance, or design patterns. And as always, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Figma Workflow Masterclass Design
with Christina Vallaure. July 23–29 - Building Interactive, Accessible Components with Modern CSS & JS Dev
with Stephanie Eckles. Aug 18–27 - UX Strategy Masterclass UX
with Vitaly Friedman. Aug 20–29 - Advanced Design Systems Workflow
with Brad Frost. Oct 1–10 - Smart Interface Design Patterns ux with Vitaly Friedman. Video course + UX certification.
- Jump to all workshops →
6. Anchor Position Tool
The CSS Anchor Positioning API lets us position elements relative to anchors, i.e., other elements, giving us new creative possibilities to solve complex layout challenges. Una Kravets built a tool to make anchor positioning more straightforward: the Anchor Position Tool.
You want to position a tooltip at the top right of your element? Or a label centered at the bottom? The Anchor Position Tool visualizes various anchor positions. Just click on the one you want to implement, and the tool provides you with the CSS (with or without logical properties), ready to be copied and pasted into your project. One for the bookmarks. (cm)
7. Styling Date/Time Input Icons
When you use HTML <input> tags with types for dates and times, supported browsers supply a little clock or calendar icon next to the input. A nice detail, but if your input is in dark mode, the icon sometimes disappears. So, how can we fix that?
The browser-supplied icon can’t be styled with background or color attributes, but Cassidy Williams found a workaround: When you select an <input> and add on ::-webkit-calendar-picker-indicator, you can style the icon as if it’s an image. Whether it’s adding filters, changing opacity, or hiding the icon entirely and using a custom image, the solution offers various options you can tinker with. (cm)
8. Meet Accessible UX Research, A Brand-New Smashing Book 📚
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”
“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print shipping in August, eBook available for download later this summer. Pre-order the book, and save off the full price.
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.