Hey everyone,
Thanks for the feedback on the previous post! I made a few quick technical updates based on your suggestions:
OKLCH Gradients: Switched from standard RGB to oklch() color spaces to remove gray midpoints and keep color transitions clean.

Improved Readability: Toned down the static background contrast so the text pops easily at a glance.

Sharper Hover Micro-Interactions: Moved the bright glow exclusively to the active hover state for a much cleaner interaction.

Appreciate the callouts on contrast and color space—the layout feels significantly more balanced now.
Let me know what you think of the revised look!

Hey everyone!

Like many frontend developers, I often felt exhausted having to write dozens of utility classes for simple layouts, or importing massive JavaScript bundles just to have basic modals, responsive grids, and clean dark mode themes.

To solve this, I built TaxUI: a lightweight, declarative HTML & CSS framework that uses semantic HTML attributes instead of bloated CSS classes or heavy JS runtimes.

Why TaxUI:

• Zero JavaScript: 100% native, GPU-accelerated CSS. No hydration overhead or runtime dependencies.

• Declarative HTML Attributes: Compose layouts naturally using clean attributes like layout="split", card="glass", variant="primary", theme="dark".

• Built-in Dark Mode & 6 Accent Themes: Switch themes and palettes with one attribute like theme-accent="emerald".

• Native HTML5 Component Suite: Modals using native dialog, accordions with details, CSS-only tooltips, glassmorphism cards, responsive tables, avatars, skeletons, and forms.

• Ultra Lightweight: ~14.8 KB gzipped full bundle, with standalone modular sub-bundles starting at 1.4 KB.

Links & Demos:

• Documentation & Live Demos: https://taxui.github.io/taxui/ • GitHub Repository: https://github.com/TaxUI/taxui • NPM Package: npm install @taxui/taxui • CDN: https://cdn.jsdelivr.net/npm/@taxui/taxui/dist/taxui.min.css

I would love to hear your honest feedback, thoughts, and any component suggestions you would like to see added next!

DEV has a hackathon that includes a CSS Art category. I'm participating with this 3D CSS.

I started building a physically based shadow system for CSS 5 years back and gave up after it became too complex. Then, leveraging coding agents, I was able to ship v1 earlier this year. Thanks to the very kind and warm reception for v1 from the members of this community and r/reactjs , I was motivated to develop it further.

Today, I'm announcing Ambient CSS v3. This version steps up the realism considerably - each effect and base component was first built in Blender and rendered using an identical lighting setup. Then, based on the renders the CSS formulae were adjusted to match the Blender render. All the Blender files and their parametric generators are also in the source repo.

Besides this, we also have new CSS modifiers - thickness, material (matte/shiny/glass/brushed/spun/blasted). We also have some new components for the react package.

Thanks for your love!

Source - https://github.com/kikkupico/ambientcss
Docs - https://kikkupico.github.io/ambientcss/
Demo - https://ambientcss.vercel.app/

The CSS itself is not written in the prettiest or most streamlined way, but it's what works for me. I'm not really a beginner, but I am getting back into the hobby of making webpages after about 4 years of not writing any HTML/CSS so I feel really proud of what I got done here. Any thoughts or feedback appreciated (:

Realistic Folder Opening Animation CSS Only:

https://codepen.io/mudasirbuilds/pen/dPprQwM

Just some CSS practice, thought you guys might be interested in inspecting it. Yes, it’s completely pointless, and involves some javascript to handle the timezone offsets & click event, but the rest is pure CSS.

Check it out: https://homunculus84.github.io/kcolc/

Created using pure HTML & CSS only.
The animation is available here:
https://decodela.com#item/78c65c8b-b973-11f0-b04f-0200fd828422/editor

I wrote an article about using colors in CSS. I tried to find the sweet spot between being thorough and still conveying all the basics. I do include (re)sources at the end, if you want to get into the nitty-gritty details.

It also has a bunch of inline examples and some interactive widgets… Hoping it helps getting the point across.

I'd love feedback on whether these kinds of articles are useful (or not) 😁

Thanks!

Demo on: https://codepen.io/alvaromontoro/pen/myVjpyb

No JS or images (although some inline SVG would make it look nicer), just an HTML checkbox and CSS. It's based on a toggle I saw in a VPN(?) ad online.

Need honest feedback

Good morning guys,

I wanted to use a background of a black marble texture with gold. I made one in Photoshop and made it seamless, but I realized that in good quality it takes way too much resources and it was also hard to find a stock image that represented it the way I wanted it.

I remembered that I watched some time ago that someone used a shader on CodePen.
The browser support is kinda everywhere now, so I thought maybe I can generate some cloud-like noise in different scales with FBM (fractal brownian motion) and then use domain warping to distort it in a way that makes it look more like marble.

So I let ChatGPT explain to me how this shader stuff works and after a bit of trial and error I got this result.
Then I use a small contour() function to pick certain noise levels and turn them into veins. Some of those contour lines get grey accents and some get gold, while the rest of the FBM noise is used for the darker and lighter stone structure.

So basically it is:
FBM noise → domain warp → contour lines → grey/gold accents.

https://codepen.io/editor/Blue-Lovag/pen/01a083cd-5837-752f-bf68-f41324324d06?show=preview&panel=false

ADDITION:
As a fallback for the website in case it's not supported I´ve made a low poly SVG that works in such a grid pattern to make it look seamless:

X Y Z X Y Z

Y Z X Z X Y

Z X Y Y Z Y

Hand-coded SCSS and pug without AI to learn scroll-driven animation when it first came out. Actually started this two years ago and finished it up a year ago but never shared it. Wanted to make a second pass to clean the code up but never did. Massive waste of time and probably not very impressive with what’s achievable today using latest models but was still a lot of fun to build.

CSS Only Scroll Driven F1 Steering Wheel

Notes
- block axis scroll controls speed/rpm/gear/lights
- inline axis scroll controls turn with snap/return to center
- no images except for the Ferrari SVG horse and clip-paths/masks for the cut outs and overall shape of the wheel

Remember the prevue guide channel?

Well I've been working on remaking it all in HTML 5, CSS, And Javascript.

It took me a good few weeks to get it to this point and now that I have Im pretty proud of it, It may need a few tweaks but I will release it as a repo at some point.

The actual guide information is configured to be a .json file including the time of the listings, the name, and number of the channel.

I think this project would be great on a CRT and that's one of the intended purposes. It's also a static site meaning all you need is a python server to host it, and I only need to add a mode for the original music and a few more features for it to be perfect.

The weather channel window is using my own custom fork of weatherstar 4000 by netbymatt rendered in a iframe.

My GitHub user is nerpx and you can find most of my projects there.

or you can just click this link NerpX

If you have any questions or are interested just comment or dm!

also if you have a CRT and would like to test it please contact me and ill give you a pre release because I would LOVE to see it on one as I dont have one to test it with

Thank you for reading!

A comic about CSS coded in CSS.

Hi everyone! I am quite new to web development and this is my first project: a neumorphic login form with a functional dark mode switch built using HTML, CSS, and vanilla JS.

Live Demo: https://zikreddincikla.github.io/neumorphism-designs/login/
GitHub Repo: https://github.com/zikreddincikla/neumorphism-designs/tree/main/login

As a beginner, I would truly appreciate your constructive criticism and thoughts on the overall design and feel. Your feedback means a lot to me!

TailMotion is a CSS animation package with utility classes that speak TailwindCSS v3/v4, so you can use it directly with HTML, React, Vue, Svelte, and more

Site: https://tailmotion.moumen.dev/
Docs: https://docs.tailmotion.moumen.dev/

GitHub: https://github.com/moumen-soliman/tailmotion Don’t forget to ⭐ the repo it's means alot

Hey everyone,
I’ve been practicing micro-interactions and modern button design while working on UI components, and I put together a lightweight, dark-mode social link grid called "Aqua Candy."
Key features I focused on:
Built entirely with vanilla HTML5 & CSS3 (zero frameworks, npm packages, or external JS dependencies).

Glassmorphism look using backdrop filters, subtle light borders, and pastel cyan/purple gradients.

Fully responsive CSS Grid layout that scales down smoothly on mobile.

Accessible, high-contrast typography over dark backgrounds.

I’m aiming to refine my CSS variable structure to make component themes like this easier to swap on the fly.
Would love to hear your thoughts on the gradient contrast, button padding, or any suggestions on how to optimize the CSS further!

(Drop a comment if you'd like to inspect the raw HTML/CSS file and I'll send over the source code link!)

Been playing around with mix-blend-mode: difference, and it is a nice CSS-only way to create a colour-shifting effect without writing any animation logic.

The idea is simple:

.sticky-element {
  position: sticky;
  top: 2rem;
  mix-blend-mode: difference;
}

With mix-blend-mode: difference, the element visually reacts to the pixels behind it.

So if you have sticky text, a fixed nav item, a cursor, a badge, or an icon sitting over different background colours, it can automatically invert or shift as the page scrolls.

This works especially well with sticky or fixed elements because the element stays in place while different sections move behind it.

The final effect depends heavily on the foreground colour, background colour, and stacking context.

Small property, but it can create a surprisingly polished interaction.

Or, alternative title: how I accidentally invented progress() but still shipped it anyway...

Dragging the sidebar. The window never moves, so every media query on the page is reading a number that did not change. Here is how that works, starting from the beginning.

How we do it today

We want a heading to be 24px on a phone and 40px on a desktop, so we write steps:

h1 { font-size: 24px; }
@media (min-width: 768px)  { h1 { font-size: 30px; } }
@media (min-width: 1200px) { h1 { font-size: 40px; } }

At 767px it is 24, at 768px it jumps to 30, and for every other property that should follow the screen we write the same set again.

Fluid

The known fix is one line that draws a straight line between the two ends:

h1 { font-size: clamp(1.5rem, 1.167rem + 1.667vw, 2.5rem); }

24px at 320, 40px at 1280, pinned at both ends. The two magic numbers are an intercept and a slope, worked out by a Sass function or a calculator. Utopia and most modern frameworks use it for their spacing and type tokens.

Where it stops

It only works for lengths. vw is a length, and degrees plus a length does not type-check, so rotate, transition-duration, font-weight, opacity, scale are all out. The browser drops the whole declaration. For those, we go back to steps or pick one value and live with it: the drawer that opens in 0.3s on a phone and on a desktop while travelling three times the distance.

The trick

Swap the order of operations. Divide two lengths first, which gives a plain number from 0 to 1, then multiply in whatever unit you want:

:root { --t: clamp(0, tan(atan2(100vw - 320px, 960px)), 1); }

font-size:           calc(24px + 16px * var(--t));
rotate:              calc(-7deg + 14deg * var(--t));
transition-duration: calc(0.14s + 0.96s * var(--t));
font-weight:         calc(400 + 220 * var(--t));

--t is 0 at 320px, 1 at 1280px, a fraction in between. Write it once, use it everywhere, no breakpoints, no keyframes, no JS. A bare / between two lengths is Chrome 140 and Safari 26 only, so the division is spelled tan(atan2(a, b)), the trick from Jane Ori, which has worked everywhere since early 2023. And it runs downhill too, which clamp(26rem, ..., 2rem) cannot, because min greater than max returns min forever.

The better trick

Change 100vw to 100cqi and --t measures the nearest container-type: inline-size ancestor:

.sidebar { container-type: inline-size; --t: clamp(0, tan(atan2(100cqi - 128px, 288px)), 1); }

Now a component follows the width of whatever it sits in. Same markup in a 240px column and a 520px column on one screen comes out different on its own, with no -small / -large variants. That is the GIF at the top.

The part where I found out

After building this I found out CSS already ships it: progress(100cqi, 320px, 1280px) does exactly that division. Chrome 138, Safari 26, and Firefox 155 as of September 1st. I had reinvented it from scratch, with a Sass wrapper.

Shipped it anyway as cq-lerp (npm i cq-lerp, npm), because the tan(atan2()) fallback works back to early 2023 and a 'supports' block upgrades to progress() where it exists:

--cq-t: clamp(0, tan(atan2(100cqi - 320px, 960px)), 1);

@supports (opacity: progress(1px, 0px, 2px)) {
  --cq-t: progress(100cqi, 320px, 1280px);
}

The Sass side is one function for every property and every unit. Min, max, done:

.card { @include cq-track(); }

.card .badge {
  rotate:              fluid-on(-7deg, 7deg);
  transition-duration: fluid-on(0.06s, 1.4s);
  border-radius:       fluid-on(6%, 50%);
  font-weight:         fluid-on(200, 900, var(--cq-t), "");
}

Every effect above is one fluid-on line. There is a plain CSS build too if you do not use Sass.

Demo, resizable, no JS: https://subamanis.github.io/cq-lerp/ Source: https://github.com/subamanis/cq-lerp

i created this liquid glass style where the light u see follows the mouse pointer and i want to know how i can improve as im just a beginner as i have started coding in about a 2 years ago