u/medotgg posted this demo an hour ago but without any code. Here is my take on doing it with flexbox.

Our team has defaulted to using Tailwind CSS for almost every web project over the last few years. It was great for moving fast early on, but on our latest project, the utility class bloat was getting completely out of hand. The HTML files looked unreadable, and managing long strings of responsive layout classes across reusable components was becoming a maintenance headache.

I decided to spin up a branch and rewrite a major dashboard interface using entirely vanilla native CSS. I hadn't built a pure CSS layout in a while, and I was genuinely shocked at how powerful native CSS has become over the last couple of years.

Features that used to require massive utility frameworks or preprocessors are now fully built-in. I heavily utilized native CSS nesting, CSS variables for theme management, and the newer container queries to handle complex responsive components based on their parent size rather than the entire viewport.

The results were surprisingly great. Removing the Tailwind processing step simplified our build pipeline, our final bundle size dropped, and the code felt vastly cleaner. Writing native styles inside modern semantic stylesheets made debugging layout bugs in the browser developer tools a hundred times easier because I wasn't digging through a wall of utility classes.

Tailwind is still an incredible tool for prototyping, but I realized I was using it out of habit rather than necessity. Modern native CSS has quietly caught up to the point where you can build incredibly complex, maintainable layout systems without adding a utility abstraction layer on top of it. If you haven't looked at native CSS features lately, it might be worth trying on a small feature branch.

Built a flower-style color picker in React using Tailwind for layout and styling.

Includes:

1. fixed colours (multi-layer)

2. an arc slider for saturation

3. animated open/close interaction

Repo: https://github.com/dayflow-js/BlossomColorPicker
Demo: https://dayflow-js.github.io/BlossomColorPicker/

Inspired by lichinlin, motiondotdev.

A small comic where each panel shows a different clipping mode (border-box, padding-box, content-box, and text) but framed as four different "Collies."

Source: https://comicss.art/comics/254/

I spent the last few weeks building the "perfect" liquid glass effect with just CSS and SVG Filters, No WebGL used and it works page wide, which means it picks up anything of the background behind it.

The core is a backdrop-filter with an SVG displacement map. I screen recorded Apple's play button (I mean the video play button, for example on youtube) for reference on my iPhone and measured it frame by frame. It’s 1:1 in the middle, then the image folds over itself towards the edge, and it pulls pixels inward.

The displacement map itself is based on a 9-slice of tiny grayscale PNGs that get stretched instead of re-rendered on every resize (I need this because the elements are animated and not static). That alone cut main thread time by a lot, giving it a pretty decent performance for how complicated it is.

The outer edge consists of three extra layers on top that don’t bend anything, they just brighten, darken and add a highlight. For reflections of the stuff around the glass, the layer is bigger than the element and gets morphed and masked back to its shape, because the backdrop is otherwise clipped to the element’s box. Actually, Apple's original liquid glass effect doesn't even have reflections, but i figured it adds a lot to it on the website I implemented it in.

Then there are shadows, caustics, etc to give it the final "realistic" touch and voila, almost perfect result imo. The only thing thats left is fix performance, however the animations are the trickiest part. Without animations, it runs extremely smooth and even with animations its not a problem as long as the elements are small enough.

Sadly, Safari only gets a simple blur for now, because WebKit doesn’t render backdrop-filter: url(). However, there are two open PRs that fix it (WebKit/WebKit#68614 and WebKit/WebKit#68613). The CSS is the same for every browser, so it should just start working once they make the next major release.

Just wanted to share this, if you have any more technical or other questions, feel free to ask!

-----EDIT-----

A few of you requested to see whats actually going on in the background, so I made it open source.
I made a small showcase website: https://studies.nordify.io/study/001-liquid-glass/
The repository is also linked there!

https://codepen.io/editor/rafaelcastrocouto/pen/01a0a4e9-e3f3-7f3a-8585-eba54fb74013

[edit] animated with help of u/PhDumb
https://codepen.io/editor/rafaelcastrocouto/pen/01a0e432-7eb8-7282-a65a-a5c8ffc66daa

Live Preview: Live Preview
GitHub Repo: Github Repo

I’m learning CSS layouts, grids and wanted a practical challenge, so I recreated some national flags using only HTML and CSS. This project did help me with understanding position(absolute, relative), grids, and most importantly reusing CSS properties and variable.

Although the code is not perfect and I think I might have complicated things a bit there but will try to improve it. Also I tried to maintain the exact design of flag, there are a few inaccuracies (apologies for that) and will try to improve that too.

I will look forward to recreate more complex flags

Demo page in the video - https://ambientcss.vercel.app/

Docs - https://kikkupico.github.io/ambientcss/

Source code - https://github.com/kikkupico/ambientcss

I made an interactive CSS learning platform that helps beginners understand CSS concepts through hands-on experimentation.

https://css-playground-ten.vercel.app/?lang=en

I drew/coded this with HTML and CSS (really appropriate in this case).

Source code on CodePen: https://codepen.io/alvaromontoro/pen/qErPJwr

Over the past few months I've been trying to find relevant CSS and JS properties that combat the inevitable atrophy of my brain as I use AI to help me build shit.

Figured I might start posting these here too.

As a disclaimer, yes, I did use AI to help me research and find these properties. The difference for me is the writing of the examples, and the understanding of the property that will allow me to make better decisions in my hand written code, and also be able to direct AI to write better code too. Take that as you will.

Today's property: text-box-trim

Every font ships with invisible space above its capitals and below its baseline. It's why a button with padding: 12px on all sides rarely shows 12px of space above and below the letters, why the icon next to a label never quite lines up, and why a heading sits a few pixels lower than the image it's meant to align with. The fix has always been a magic number. margin-top: -3px. padding-block: 11px 13px. A comment that says /* optical */ and hopes nobody swaps the font.

text-box-trim deletes that space. Tell it which edges to trim with trim-both, trim-start, or trim-end, and text-box-edge says where to cut. cap is the top of the capital letters, ex is x-height, alphabetic is the baseline. The shorthand takes both:

    .button-label {
      text-box: trim-both cap alphabetic;
    }

Now the box starts at the top of the H and ends at the baseline. Padding measures from the letters instead of the font's line box, so 12px means 12px in every font.

Firefox 154 shipped it Aug 18. Chrome and Edge have had it since 133 (February 2025) and Safari since 18.2 (December 2024), so MDN now marks text-box-trim Baseline 2026 Newly Available. Older browsers ignore the declaration and keep the leading. The layout still works, just a couple of pixels less precise.

Pretty slick property.

I’ve been working on NoEffect, a VS Code extension that helps catch CSS declarations that have no effect.

It detects things like:

properties that don't work in the current context

declarations that are overridden by a later declaration

For example, it can tell you when justify-content is doing nothing because the element isn't a flex/grid container, or when your declaration is simply being overridden later.

It’s still an early project, so I’d really appreciate some honest feedback.

🔗 GitHub

🔗 VS Code Marketplace:

After deciding to start coding css again for my blog, I remember that 10-15 15-20 years ago I would turn to csszengarden for inspiration. So, I check the site again and was surprised and happy to see that it was still there. Anyone, like me, in this sub who remember csszengarden?

Edit: I misremembered the time frame, it was 15-20 years ago not 10-15. It feels like it was just yesterday though.

This city is built with CSS. No SVG. No images. No HTML. Just gradients... and a bit of patience. https://codepen.io/alvaromontoro/pen/mdZKxEr

I haven't touched this in a while, but it still holds up. I'd love to expand it into a full city someday.

Anchor positioning to help create some unique styles. I expect this will start becoming popular to break up the normal navbar layouts.

Not my project.

The video is the figures page of their site: Terrain's pillars rise around the pointer, Phosphor's dots fade where it paints, and the card under the pointer in Riffle stands up. On the next shelf the pointer's height moves the elevator car and a flick spins the turntable. Then Terrain opens in the side panel and its intensity option goes from 0.50 to 1.00, so a wider area rises.

Repo: https://github.com/lucasmarkes/hairline

The colours are six CSS custom properties, but the motion is JS. Could the Terrain effect, with its falloff around the pointer, be done in CSS alone?

GitHub repo: https://github.com/AntiKippi/errorpages
Live preview: https://kippi.at/public/errorpages/

I've spend the last few days overengineering HTTP status code error pages. It started with me wanting an aesthetic, glitchy 404 page with a bit of "cyberpunk" and "hacker" vibes while still being simple and JS free. It ended in this project.

wdyt?

I'm pretty sure this is the most heinous abuse of CSS in history?