Minimal CSS-Only Blurry Image Placeholders — An experimental, pure CSS technique for producing blurry, low-quality image placeholders, using just a single custom property. Beyond just sharing the clever technique, the post also dives into how it all works, exploring the limits of CSS variables and radial gradients. There’s a gallery filled with examples here. It's a smart little hack, but one that I found didn't play nice in Safari.

Lean Rada

Penpot Launches Native Design Tokens — Penpot is the first design tool to integrate native design tokens—a single source of truth for top design and dev collaboration. Enjoy Penpot’s standardized design tokens format to reuse and sync across different platforms, workflows, and disciplines.

Penpot sponsor

Better Typography with text-wrap: pretty — Support for improved text wrapping has just shipped in the latest preview of Safari. Here, Jen shares a look at what this update means, noting that it brings “an unprecedented level of polish to typography on the web”. There’s a solid demo here that highlights all of the wins, but you’ll need to view it in Safari Technology Preview 216.

Jen Simmons (WebKit)

Overengineered Anchor Links — Anchor links can often be an issue if the linked content is at the bottom of the page, so here’s a surprisingly meaty exploration of the fixes — going way beyond simple padding, and diving into mathematical equations to solve the issue via a custom mapping function. Formulas, visualizations, and more!

Mats Erdkamp

📙 Articles, Opinions & Tutorials

Top 5 CSS Navigation Menu Mistakes — Runs through some of the most common UI gotchas found within navigation menus, such as unforgiving target areas on dropdowns.

Zoran Jambor

Use shape() for Responsive Clipping — Support for the CSS shape() function is now slowly rolling out — you can expect it to work in Chrome 135 and Safari 18.4. As such, here’s a quick look at how it can be used with clip-path for responsive clipping — there's a demo here. Ana Tudor has also chucked together a 'breathing box' demo.

Noam Rosenthal

Implementing Multi-Tenancy into a Supabase App with Clerk — Learn to build B2B SaaS with secure multi-tenancy: user roles, team permissions, and cross-tenant data isolation.

Clerk sponsor

More Accurate DevTools Performance Debugging using Real-World Data — The latest on Chrome’s ongoing efforts to improve the DevTools Performance panel — this time with a focus on CPU throttling calibration, and data-driven improvements.

Brendan Kenny

Background Image Opacity in CSS — A quick look at the options available for controlling opacity, including ‘blending’ via RGBA, pseudo elements, and an experimental cross-fade function.

Jim Nielsen

▶  Modern CSS Theming, Light Mode, Dark Mode and More — A roughly half hour look at what modern CSS features we can use to create dark and light themes and how to save user preference to localStorage.

CJ (Syntax)

Making :visited More Private — Here’s how Chrome now prevents any potential privacy leaks that use visited links as an attack vector.

Kyra Seevers

Cover Flow with Modern CSS: Scroll-Driven Animations in Action — The Cover Flow feature on the iPod was super cool, so this scratches a certain nostalgic itch.

Addy Osmani

CSS Bursts with Conic Gradients — Some neat little experiments and demos here.

Chris Coyier

CSS Custom Properties vs. Sass Variables: A Pragmatic Guide
Stuart Robson

Automatically Create Social Card Images for Your Astro Blog
Emma Goto

Automated Visual Regression Testing with Playwright
Frederik Dohr

🧰 Tools, Code & Resources

Tailwind CSS v4.1: Text Shadows, Masks, and Tons More — A new version of Tailwind CSS dropped just a few days ago, adding text-shadow utilities, the ability to mask elements, fine-grained text wrapping, improved browser compatibility, and much more.

Wathan & Hollick (Tailwind CSS)

UA+: User Agent Plus — If you’re after a better baseline for your stylesheet Manuel has a work-in-progress CSS reset that is worth a look. “Instead of mostly resetting and normalizing properties, we focus on improving existing user agent styles and adding new styles only where browsers fall short”.

Manuel Matuzović

Your Users Saw the Error. Sentry Makes Sure You Do Too — Errors? Don't guess what happened on a browser you don’t own — let Sentry tell you. Console logs, stack trace, user actions, it’s all here. 👉 Stop flying blind with a free trial.

Sentry sponsor

Lighthouse Scoring Calculator: A Small Playground for Understanding Lighthouse Scores — This tool lets you fiddle around with some hypothetical values calculated by Lightouse so you can get a rough idea of which values have a bigger effect on the overall score.

Chrome for developers

Record: Open-Source Web App to Record Screen and Camera Directly in the Browser — Another media-related project from Addy, this one is actually a fork of an older project with some modern enhancements. You can give it a spin here.

Addy Osmani

Khroma: An AI Color Tool to Design with Colors You Love — An interesting method for generating color palettes. You choose 50 colors you like (saved in localStorage), which personalizes the algorithm to give you palettes based on your favorite colors.

George Hastings

Penguin UI: A Plug-and-Play UI Component Library for Tailwind & Alpine.js
Salar Houshvand

UI Inspector: A Chrome Extension to Visually Edit Live Web Pages
UI Inspector

Item Flow: A New Unified Concept for Layout — You may recall all the debate around 'masonry' layouts in CSS and how best to implement them — now there's a third option in the mix. It’s one that “unifies the flex-flow and grid-auto-flow properties into a whole new mechanism” known as Item Flow. Here’s a look at what it is, plus what it means for Flexbox and Grid.

Jen Simmons (WebKit)

Master Chrome's DevTools — Join Jon Kuperman for this video course diving into Chrome's DevTools. You'll go beyond console.log(), learning how to inspect, debug, and audit your web apps — tracking performance, identifying bottlenecks, making performance gains, and more. Level up your DevTools skills.

Frontend Masters sponsor

Carousels with CSS — As of Chrome 135 you could now, theoretically, ditch the various carousel libraries and make use of new features introduced via CSS Overflow 5. Adam runs through the multitude of options this opens up — meaning we now have tools at our disposal for creating accessible, performant carousels with just CSS. Kevin Powell has also taken a look in this (honestly) related video (stick with it).

Adam Argyle

📙 Articles, Opinions & Tutorials

▶  The Death of the Browser — In ten years, could web browsers become a nostalgic memory? This lightning talk (related slides here) shares our journey from the invention of the browser, to the data arms race, to the dawn of AI agents. Proposing how those agents are possibly enabling a return to the era of free information with the ‘web as the API’.

Rachel-Lee Nabors

How AI Agents Are 'Quietly Transforming' Frontend Development — “We’re not far from agents that can run A/B tests, evaluate performance impact, and recommend UX optimizations based on live user data”.

Alexander T. Williams

Learn How to Integrate Clerk with Your Lovable — Lovable integrates Clerk for custom domains, streamlined auth flows, and waitlist-powered onboarding.

Clerk sponsor

Expanding CSS Shadow Effects — A solid exploration of CSS shadows, going beyond just basic depth perception. Preethi shares how things like inset box-shadows, filters, layering, and @keyframes can create interesting and dynamic visual effects.

Preethi Sam

Cowardly Defaults and Courageous Overrides with Modern CSS — A look at how modern CSS techniques can create versatile utility classes that don’t clash with existing styles.

Tyler Sticka

▶  Revisiting Fluid Type — A roughly hour long chat with Richard Rutter of Clearleft about fluid typography, and how a website design should plan for (and respond to) user preferences.

Miriam Suzanne & Stacy Kvernmo

The Systemic Failure of Implementing CSS Principles — On lengthy utility classes: “I believe I am not the only one frustrated with some ‘modern’ approaches to CSS architecture”.

Andrea Davanzo

Designers, Your Excuse Is Gone. Stunning, Animated and Accessible. Yes, You Can! — “Accessibility and stunning animated design can go hand in hand”.

Anne Bovelett

How to Improve Webpage Speed: Tips & Best Practices — Some good broadly applicable tips here.

Sjardo Janssen

Browser Choice is an Accessibility Consideration
Beeps

How Does Chrome Prioritize Image Requests?
Conor McCarthy

The Case for “Old School” CSS
Chen Hui Jing

🧰 Tools, Code & Resources

CSS Holographic Masks — Christian has been experimenting with some neat holographic effects created with CSS gradients and masks, and shares the results here via various little demos. Scroll to see the shiny stuff in action.

Christian Alder Codepen

Add Barcode & QR Code Scanning to Your App with a Single Line of Code — STRICH is a lean JS library for real-time 1D/2D barcode scanning in the browser. Free trial and demo app available.

STRICH sponsor

TailwindFlex: A Library of 2,000+ Free Tailwind Examples — This resource includes a few different ways to filter what you’re looking for (e.g. 80+ tags), or you can search by keyword. You can also build your own components using their live playground.

TailwindFlex

Font Sensei: Google Fonts Categorized by Tag Names — To filter the results there are dozens of tags to choose from, for example high-contrast, all-caps, futuristic, etc., with each tag displaying the number of fonts on that style (e.g. “western 5”).

Font Sensei

SaaS UI: Free SVG Illustrations for Your Documentation or Design System — Not exactly icons but SVG illustrations of common UI components for your team’s docs website, for UI libraries or design systems. Includes 200+ illustrations that are also available for Figma.

SaaS UI

Dice UI: Composable, Unstyled UI Primitives for Building Accessible Web Apps — Currently a modest collection of about 20 React-based components and utilities, including form elements, a Kanban-style board, a sortable component, and more.

Sadman Sakib

'My Favorite Tools for Web Accessibility Testing'
Alexander Lehner

github-assistant: A Tool for Exploring GitHub Repositories by Asking Natural Language Questions
github-assistant

Web SVG: 100+ Free SVG Illustrations
Agent Web Factory

🔐 Branding for Passkeys?

If you've been wondering what Kyle Simpson, well known for his work in the JavaScript space and his You Don't Know JavaScript (YDKJS) books, has been up to, he's currently exploring the idea of passkey branding with his 'Passkey Garden', in order to improve the user experience of using this powerful authentication method (explained by Google here).

The <select> Element Can Now Be Customized with CSS — There’s now an accessible, standardized way to create styleable <select> elements — thanks to appearance: base-select. Adam shares how this has been “many years in the making” and after “many hours of engineering and collaborative specification work” we now have a rich component that won’t break in older browsers. Here’s a closer look at how things play in Chrome (the first to implement support), and how to use it.

Adam Argyle

How to Think About Baseline and Polyfills — Despite polyfills not being included as part of the Baseline project, Baseline can still help bring some nuance to the decision making around whether or not to use them.

Jeremy Wagner

2X-40X Faster Docker Builds with Blacksmith — With a one-line code change, Blacksmith can make your Docker builds incremental by mounting your Docker layer cache into your GitHub Actions runner. Blacksmith is used by 300+ companies like Ashby, Clerk, and Mintlify.

Blacksmith sponsor

Support Logical Shorthands in CSS — The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years (since 2017!). Miriam asks if we get them unstuck?

Miriam Suzanne

Minding the Gaps: A New Way to Draw Separators in CSS — Explains CSS gap decorations, a new proposal being worked on (and seeking feedback) for adding and extending fine-tune control over gap decorations.

Babbitt & Brosset (Microsoft)

📙 Articles, Opinions & Tutorials

Revisiting CSS border-image — A deep dive into the powerful border-image property and how it can be used in various creative ways: “By slicing, repeating, and outsetting images, you can create intricate borders, decorative elements, and even dynamic overlays with minimal code”.

Andy Clarke

Meet @clerk/agent-toolkit — New experimental Clerk package for AI agent workflows. Manage users and orgs with Vercel AI SDK & LangChain support.

Clerk sponsor

The Bare Minimum You Need to Enable View Transitions on Your Site — View transitions are a solid way to make your site feel more dynamic and engaging when folks are navigating between pages. Here’s the basics for getting started.

Amit Merchant

Layered Text Headers — Applying a stroke effect to text across all browsers is possible, but as Chris points out it makes use of a center-aligned look which “looks like 💩” (his words). However, the paint-order property may be worth a look as part of a solution for achieving a similar look.

Chris Coyier

Previewing Content Changes in Your Work with document.designMode — A look at several use cases for document.designMode and how it can be used to preview content changes, do basic content editing, and improve team collaboration.

Victor Ayomipo

Best Practices for Cognitive Accessibility in Web Design — Lots of good practical advice here, covering ways to improve your website’s cognitive accessibility.

Caitlin de Rooij

25 Ridiculously Impressive HTML5 Canvas Experiments
Abhin Sharma

Why Do We Have a Cache-Control Request Header?
Harry Roberts

Downtime vs 'Slowtime': Which Costs You More?
Tammy Everts

🧰 Tools, Code & Resources

An MCP Server for Playwright and Browser Automation — MCP (Model Context Protocol) servers enable certain LLM-based agents (such as Claude, Claude Code, and Cursor) to perform actions on a system outside of their usual sandbox. This new project from Microsoft enables such LLMs to interact with Web pages in a structured way (much as Playwright lets you do from Python or JavaScript code).

Microsoft

CASCII: A Web-Based ASCII and Unicode Diagram Builder — Imagine something like MS Paint but for text-based drawing. You can switch between ASCII and Unicode modes and enable a background grid for alignment. Export directly to clipboard or in Base64.

Caspar Wylie

Introducing Figma to Bolt — Turn Figma designs into pixel-perfect full stack apps in one click.

bolt.new sponsor

Konva: A JavaScript 2D Canvas Library — The native API for Canvas elements is pretty good, but Konva is a popular abstraction that sits on top and provides a more structured way to work with shapes, styling, events, animations, and more (lots of demos with code). It also has extra integration libraries for Vue, Svelte and React.

Konva

Reveal.js 5.2: The HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser. v5.2 adds the ability to trigger ‘lightboxes’ where viewers can see images and videos in a way where they stand out more.

Hakim El Hattab

Parvus 3.0: Accessible Lightbox with No Dependencies — I love how it says not to use overlays on web pages but if you have to, use this! There’s a CodePen example.

Benjamin de Oostfrees

Fancy Components: A Growing Library of Ready-to-Use Animated React Components — Includes a whole slew of components for doing various text animations, along with others for backgrounds, physics-related animations, SVG filters, and more. Try them out here.

Daniel Petho

StringTune: The JavaScript Library Born from a Design Agency’s Workflow — A look at how to make use of this flexible JavaScript library for animations, smooth scrolling, and interactive effects. npm package.

Fiddle.Digital

Cursorful: A Screen Recording Browser Extension with Cursor-Following Zoom
Cursorful

MetaCheck: Preview Your Site’s OG Images, Meta Tags, Favicon, and More
Appstate

A Deep Dive into the Inline Background Overlap Problem — If you want to get a semi-transparent background behind some inline text with nice padding you’ll likely face an overlap problem. Ana goes deep into exploring the solution along with some of the more complex variations of the issue that we could face.

Ana Tudor

Introducing command and commandfor — Chrome 135 (and preview versions of Firefox and Safari) add support for two new HTML attributes, command and commandfor. They’re for adding declarative actions to HTML buttons without directly requiring JavaScript.

Keith Cirkel

New: Secure In-Person Payments for Mobile Apps — Square's new Mobile Payments SDK is PCI-compliant, free to integrate, and has no API usage costs. With support for a diverse range of hardware, our in-person payment solution is reliable whether on the move, at a kiosk, or over the counter. Try it now.

Square sponsor

🕵️‍♂️ Buying Browser Extensions for Fun and Profit — An interesting look into the shadowy world of how browser extensions, with hundreds of thousands of users, can be easily bought — potentially by malicious proprietors.

John Tucker

📙 Articles, Opinions & Tutorials

Styling Counters in CSS — A guide to styling counters, going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that aren’t lists look like lists.

Juan Diego Rodríguez

Self Gap — Some thinking on how best to control a custom gap between some flex or grid elements. As ever, Ahmad has code examples and solid demos to help explain the approaches considered.

Ahmad Shadeed

Build Forms from JSON Schema with SurveyJS — Fully customizable, white-label form builder UI by SurveyJS—seamlessly integrates with React, Angular, and Vue 3, with no backend limitations.

SurveyJS sponsor

Breadcrumbs are 'Dead' in Web Design — Once a clear staple in web design, the author argues that they’ve now become somewhat obsolete in “today’s non-linear, context-driven web, where dynamic and personalized navigation systems take precedence”.

Noah Davis

Design Systems Need a Color Space — “Software developers and designers have been able to ignore colour spaces for a long time, but it’s about to become required knowledge.”

Marc Edwards

Chilled Out Text Underlines — Shares a nice treatment for styling underlines. Worth keeping in mind accessibility considerations though.

Chris Coyier

Styling an HTML Dialog Modal to Take the Full Height of the Viewport — Simon encountered an issue with an unwanted gap appearing when using the dialog element. Here’s how it was solved.

Simon Willison

Web Components vs. Framework Components: What’s the Difference? — A comprehensive comparison between Web Components and framework components, discussing their definitions, strengths, weaknesses, and various performance considerations.

Gabriel Shoyombo

Use Cases for the Document Picture-in-Picture API — A way to open a floating, always-on-top window (‘picture-in-picture’) that can display arbitrary HTML content. Chrome only, though.

Jad Joubran

But How to Get to That European Cloud? — A thoughtful take on a pressing need for an increase in geographically diverse web infrastructure. Touches on broader political considerations that, naturally, not everyone may see the same way — but, ‘don’t put all your eggs in one basket’ is generally good advice.

Bert Hubert

Leveraging Three Types of User Feedback to Create Better User Experiences
Mehdi Hussen

Lazy Load Background Images with the IntersectionObserver API
Anna Monus

Understanding the European Accessibility Act (EAA)
Léonie Watson

Making a Browser Based Game with Vanilla JS and CSS
Eoin McGrath

🧰 Tools, Code & Resources

Tailwind Gradient Generator: Create CSS Gradients for Tailwind Projects — Select to preview any of the existing gradients in the gallery and customize the ‘direction’ of the gradient. You can also preview the gradient on text (as seen above) or just as a regular background.

oxbow ui

Loadership: An Interactive Tool to Build and Customize Pure CSS Loading Animations — Click any of the dozen or so prebuilt loaders (which are unique!) and you can customize them to your liking (color, speed, size, etc).

Loadership

🔒 Protect Against AI Bots, Fraud, and Abuse in Real Time — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today.

WorkOS sponsor

Enhance: Enhance and Upscale Your Images Using AI — Yet another single-purpose image editing tool from Addy Osmani, this one is a simple AI-powered image upscaler/enhancer that you can try out online here.

Addy Osmani

svg2pdf.js: SVG to PDF Conversion in the Browser — There’s an online playground to give you a feel for what it can do.

yWorks GmbH

shiki-stream: Generate "Streaming" Syntax Highlighted Code — Based on the popular Shiki syntax highlighter, this will reveal the selected code line by line (i.e. in a “stream”), which you can play with here.

Anthony Fu

Frontend Practice: A Practice Ground for Improving Frontend Skills — A collection of real sites each with a spec sheet that you can use to recreate the project to improve your skills.

Kyle Shook