I thought about things that have happened in CSS in 2025 and what I think you should probably know. Then I blogged it. frontendmasters.com/blog/what-yo... It's not *everything* — it's my own curated list.

What You Need to Know about Modern CSS (2025 Edition) If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.

The Future of Coding Sale ends TODAY! Save $100 on yearly membership + unlock: ✨ Personalized Paths ✨ AI & DevOps Learning ✨ Quizzes & Flashcards ✨ 250+ awesome courses + a fantastic roadmap for more ⏳ <24 hours left! Don't miss it

Just past 1000 videos on YouTube, and (very slowly) coming up on 1 million subscribers... AND as was pointed out to me by @nerdy.dev, I'm also approaching 100 million total views! 🤯 Lots of subs is a fun stat, but that's absolutely bonkers.

CSS offset and animation-composition for Rotating Menus The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.

Replace Your Animated GIFs with SVGs You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!

Choosing the Right Model in Cursor Cursor has an "auto" mode, "but if you care about cost or predictability, it’s worth picking models manually." says Steve Kinney.

🚀 80+ tutorials are FREE during our Future of Coding Sale! Learn from Kevin Powell, Web Dev Simplified, Melkey, and more. ⏱️ 15–30 min lessons. Ends Thu, Sept 18. 👉 frontendmasters.com/tutorials/

Getting Started with Cursor Cursor is an AI-focused VS Code fork. Here's Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.

It’s here: The Future of Coding Sale 🛸 $100 off yearly Frontend Masters → 250+ courses, AI workshops, personalized learning paths, quizzes, & more frontendmasters.com/sale/?utm_so...

The `-path` of Least Resistance (Part 2) This time we're looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.

The `-path` of Least Resistance (Part 1) A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.

Opening a Details Element from the URL If the #hash in the URL matches the ID of an element *inside* a element, it'll open. No other fancy code required.

Very Early Playing with random() in CSS (Only Safari Technical Preview!) Awfully cool `random()` is coming in CSS. The design possibilities are quite cool.

Quick Dark Mode Toggles All the browsers DevTools have a way of emulating color modes. The are essentially faking the system preference at the application level. Here's where those controls are located and another nice tool.

New Cloud Infrastructure Course! Startup to Scale with Erik Reinert Learn containers, CI/CD, DB migrations, load balancing, Terraform, and more. 📦 Ship with confidence! frontendmasters.com/courses/clou...

Obsessing Over Smooth radial-gradient() Disc Edges An underdog media query, resolution queries, comes to the rescue here in defining radial gradients that don't blur or get the jaggies.

Web Design: What is the web capable of that is hard to express in design software? The web platform has a heaping helping of more design capability built into it than any design software does.

Don't miss the Complete Intro to MCP workshop next Tuesday with Brian Holt! frontendmasters.com/workshops/co...

Excited for @frontendmasters.com session today

A Nice Vanilla App Archicture Using Web Components and CSS Module Scripts CSS module scripts help keep the dream of co-locating files that all relate to a component, without needing a bundler.

Using the Custom Highlight API You can get your hands on ranges of text in JavaScript, then apply a named "highlight" on them, so you can style that range in CSS with no other selector necessary.

Get the number of auto-fit/auto-fill columns in CSS The whole point of auto-fit and auto-fill is that you aren't saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

Infinite Marquee Animation using Modern CSS A row of logos that animate forever perfectly and don't have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!

Should we NEVER use non-logical properties? Best bet: just always use them. More nuanced take: there is a few situations where using the physical property is still releavant.

Liquid Glass on the Web It's a complicated look! There may or may not be blurring, light refracts in tricky ways, the highlights are quite bright, and you've got to be very careful about text contrast accessibility.

The Figcaption Problem When an image isn't "full width", but you want that caption underneath to wrap at the end of the image.

Introducing Zustand (State Management) Zustand is a minimal, but fun and effective state management library which just may improve your render performance.

Adaptive Alerts (a CSS scroll-state Use Case) A single button, but it has two different behaviors in JavaScript depending on how far you’ve scrolled in an element (as determined by CSS!)

Stacked Transforms A look at what happens when you add a whole list of transforms to an element, and how that interacts with `animation-composition`.

🔥 Build apps that don’t break as they grow @davidkpiano.bsky.social's new course teaches real patterns for managing complexity in React & Next.js: 🔄 Replace useEffect clutter 🧱 Normalize state ⚡ Use event-driven design State Management at Scale → frontendmasters.com/courses/reac...

Deploy a Site with a Build Process & a Custom Domain Name The last part of this series is taking our site that we've got in GitHub and addng an Astro build process to it, then mapping a domain we own to the Netlify-hosted site.

View Transition List Reordering (with a Kick Flip) It's pretty straightforward to animate list items into new positions, but there is a few tricks when the specific one you've chosen to move needs a *different* transition.

Satisfies in TypeScript The `satisfies` keyword allows you to assert that a certain value "satisfies" a given type, while preventing a wider type from being inferred.

Custom Select (that comes up from the bottom on mobile) You've got A LOT of control over the design of select menus now, and it can be done as a progressive enhancement.

My new @frontendmasters.com course "Getting Started with CSS v2," creates a single-page portfolio website with light and dark themes. Color themes are completely controlled through CSS via light-dark(), :has() selectors, and a switch. Course: frontendmasters.com/courses/gett...

🚨 New courses list just dropped: ✅ Compact grid ✅ Hover for ratings & reviews ✅ Filter by topic & tech frontendmasters.com/courses/ Check it out and tell us what you think!

Step Gradients with a Given Number of Steps A deep dive into producing an interpolated "gradient" of colors from just two provided colors.

I wrote a new article for @frontendmasters.com: Step Gradients with a Given Number of Steps! Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution frontendmasters.com/blog/step-gr... Enjoy! #CSS #SVG #filter

Quantity Query Carousel :has() makes quantities queries both easier and more powerful. We can alter how a grid is laid out and where the children go. Or, we can just blast it into a carousel.

✨ New article: Understanding CSS corner-shape and the Power of the Superellipse! A deep dive into the new property, and a little dig into the math behind it, with lots of cool examples, but they only work on Chrome 139+. 🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/underst...

Understanding CSS corner-shape and the Power of the Superellipse The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.

Drawing CSS Shapes using corner-shape After you've got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.

Scope in CSS We've got @scope in CSS now, and it's got it's uses. But the concept of scope in CSS is a wider idea.

Coming soon. A Spring Boot course that gets you hired! @starbuxman.joshlong.com

Wow the content on @frontendmasters.com is really fantastic, speakers are engaging and the content quality is amazing. What would be really cool is if I could define my own custom learning paths and add courses to it to keep track. Is this a feature that already exists and I'm missing it?

I have a new article out. It's about a better technique to create grainy gradients, without the big problem that layering a noise layer brings: altering the original gradient palette (to a greater or lesser extent, depending on the approach used). #CSS #SVG #filter

Grainy Gradients This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.

1fr 1fr vs auto auto vs 50% 50% There are several different ways to do equal width columns. But some are, uh, more equal than others.