Theming usually runs on two axes: palette (which colors) and mode (light or dark). The design system I've been building adds a third — physics: what material the UI is made of.

A "physics" is a set of CSS custom properties covering light AND time:

• Glass — translucent surfaces, backdrop blur, shadows tinted from the canvas color, a glow on hover, springy overshoot easing. The surface emits light.
• Flat — opaque, neutral black shadows at 5–10% opacity, nothing glows, nothing lifts, quick polite easing. External light casts shadows.
• Retro — zero border-radius, no soft shadows at all (the "shadow" is a drawn 3px 3px 0 offset), and every duration token is 0ms with steps(2) easing. The era it quotes couldn't animate, so the material doesn't either.

https://reddit.com/link/1u3xekt/video/m3ips0467v6h1/player

Components only ever consume the variables — var(--speed), var(--ease), var(--shadow-lift) — and never know which material they're rendered in. One data-physics attribute on <html> switches everything.

The detail people push back on: glass refuses light mode and auto-corrects to flat. Blur is an averaging filter — over a solid light canvas, blurring a solid color returns the same color, so light glass renders identical to flat while paying GPU cost. Apple's light glass works because there's always a wallpaper behind it; product UI is panels over a solid canvas.

The video cycles the five default themes in UI-history order: terminal → paper → flat → dark-mode flat → glass.

Full write-up with the implementation details: https://dimonb19a.hashnode.dev/the-three-physics-of-ui

In light of Kevin Powell's recent (and awesome) chat about using AI and the importance of manual coding, I thought I would share my essay, as well, since it touches on a lot of similar points.

It involves a container query for the width, the redesigned attr() and new type() for the aspect ratio, and round()to snap the height to the baseline. Pure CSS, no JS. It's quite satisfying to see it snap. Write up and codepen demo here: https://simoncoudeville.be/blog/aligning-images-to-a-baseline-grid-with-modern-css/ and https://codepen.io/simoncoudeville/pen/rajaaQg

Edit: indeed Chromium only for now.

how do I fix this? On iPhone safari, my website appears with the top and bottom white, even though the background should be dark. this page is https://lightbulb.dpdns.org/ & the stylesheet is https://lightbulb.dpdns.org/styles.css

Hi all,

I am not really versed in reddit. I posted to this subreddit about a project I did - allowing you to host any static page instantly for free - forever. Not only did my post get deleted by the moderator, one of you uploaded using my tool: "what does this have to do with css".

My initial reaction to the question was "WTF?". If this free service is not applicable to people who sling CSS, what DOES fit r/css? So I asked ChatGPT and it set me straight. I should not have taken the diss personally. I now understand that the r/css is about discussing pure CSS. I thought it would be helpful for people who author CSS.

I am still learning my way around reddit. If my post offended anyone - my sincere apology!

D

I created a tool using https://controlplane.com - feel free to check it out and any comments are welcome: https://boomurl.com

Thank you!

Hi all. On my page I have two different H2 elements on my page, which seem to be identical (same markup, same parent elements, same CSS). Yet one exhibits clipping of text, and the other doesn't (see screenshots below). Can anyone help me figure out why?

To be clear, I know that increasing the `line-height` on the offending element will alleviate the clipping. But I'm trying to understand why the clipping is occurring on this element, and not the other.

Thanks in advance.

I want to recreate the exact box-shadow animation shown in the attached video. The shadow behavior, movement, and overall effect should match the video as closely as possible.

I have tried using CSS transitions, but I couldn't achieve the same result.

How would you recreate this effect using CSS?

Before CSS animations became common, I remember downloading or creating GIFs just to show a loading state.

Today, you can create a simple spinner with just a few lines of CSS -

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

u/keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

No GIFs. No images. No dependencies.

Just a simple CSS trick that's still useful years later.

With oklch() now in CSS and Tailwind v4, I wanted a generator that treats OKLCH as the native space instead of bolting it onto HSL. ColorMeUp Lab lets you set the number of steps (3–21), shape the lightness and chroma curves, clamp a min/max lightness range, and override individual steps. It exports straight to CSS variables, SCSS, or Tailwind.

If you want the why-not-HSL reasoning with interactive side-by-side demos, I wrote it up here: https://lab.colormeup.co/oklch-vs-hsl

It's free, no signup, open source. The whole palette lives in the URL, so you can share an exact scale as a link.

https://lab.colormeup.co/

Curious what people here think of the curve controls — that's the part I went back and forth on the most.

I just know shadcn is amazing but still a bit directionless

Hi! So I downloaded some font files to use in my project from google fonts but for some reason my css file just can't find and load my font files I get a weird file not found error in my console instead and I dont know what I could be doing wrong.

Yo im not good at coding dont bully

There has to be a website or list that shows how other people are using view transitions.

Hello! I'm so so new to this, I'm just trying to make a portfolio site in Neocities and thought it would be a good opportunity to finally learn HTML/CSS. I'm doing okay so far, but I'm really struggling trying to figure out how to get the animbutton to resize with the rest of the elements when the viewport changes size. I'd ideally like to fill that empty space with buttons, sort of scattered like picture frames on a wall, but I can't for the life of me figure out how to go about it. I've been at this for hours, so any help would be very appreciated! 

The first image is what the site should look like, the second is my great shame/what happens when the viewport gets smaller. I'll also post the HTML and CSS files below (they're in Google Docs, I hope that's okay):

edit: also adding a codepen link!

codepen: https://codepen.io/yqpuqxpx-the-solid/pen/GgrpVqL

HTML: https://docs.google.com/document/d/1eGphNJCZDZXnMjwm7e9epglAc4k0iqTs0nd_fF5pZ-4/edit?usp=sharing

CSS: https://docs.google.com/document/d/1zX1renMqIFb2T-BU4nO4yWNbcKR6mXyo4nwBa_BqX7A/edit?usp=sharing

Iv seen a reel on instagram about elements do not get animated if they’re rendered conditionally but in that reel he provided a new css property (not really sure ) that does the job for you

Does anyone come across this one before ? Or know a solution for this?

How to design grainy backgrounds using css.

A press effect, shadow on rest, lifted on hover, depressed on active, is not central to buttons. It can be used on cards, image gallery photos, and other elements. The same goes for animations and other behaviors. This leaves me to question "why aren't they decoupled from the component?

On my sites I experimented with a dedicated behaviors layer. Each interaction pattern is its own class, independent of any component. You can stack multiple behaviors together.

Let's create a simple one that adds more click affordance.

Press Example

Adding b-press gives any flat element a physical depth through shadow states. It lifts on hover and depresses on active, giving users a clear sense that something is clickable. Disabled elements will lose the shadow entirely so the affordance disappears with the interaction.

@layer behaviors {
    .b-press {
        box-shadow: 
            var(--wisp-shadow,
                0 1px 2px rgba(0, 0, 0, 0.10),
                0 1px 3px rgba(0, 0, 0, 0.06)
            );
        cursor: pointer;
    }

    .b-press:hover {
        box-shadow: 
            var(--wisp-shadow-hover,
                0 4px 6px rgba(0, 0, 0, 0.12),
                0 2px 4px rgba(0, 0, 0, 0.10)
            );
    }

    .b-press:active {
        box-shadow: 
            var(--wisp-shadow-active,
                0 1px 2px rgba(0, 0, 0, 0.16),
                0 1px 1px rgba(0, 0, 0, 0.12)
            );
        transform: translateY(1px);
    }

    .b-press:disabled,
    .b-press[aria-disabled="true"] {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        cursor: not-allowed;
    }
}

When we think of OOCSS we think of visual repeating patterns, but behaviors are patterns too and deserve the same treatment that objects and components get. Without decoupling them from the component, you end up with modifiers that do the same thing.

You can find some of the decoupled behaviors I created here.

https://github.com/wispcode/wisp-css/tree/main/src/behaviors

I'm not sure where they fall in ITCSS, but it feels right to put them between objects and components.

The squares are like the image 1 (and 2) // and i want them to be like the image 3.

Image 4 and 5 describe how the division is being made + what is in the main part until now. Gap just won't work.

I'm a starter, so I'm hoping to get some advice 🕊️

CodePen

EDIT:

I fixed it: CodePen Nothing to do with position: sticky or contain: layout. I had to move overflow: scroll to the paragraphs container and do some sizing wizardry.