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/

I've been writing CSS for over 10 years, and I wanted to share one of my older projects that I made to practice selector switching and CSS interactions. I've included the code as well, so if you're interested in learning CSS, feel free to take a look!

https://codepen.io/BlackDog1121/pen/abJNLOX

One thing I should mention: the visual ideas themselves aren't originally mine. I enjoy browsing Pinterest for cool CSS animations and interactions, then trying to figure out how I could recreate them from scratch on my own.

It's one of my favorite ways to practice CSS. :)

? is this a grid thing where you have elements declared afte the grid whereby they appear as if they are in the grid or atleast some of them ?

Hey everyone,
Quick update based on the solid feedback on my last post:
Switched to oklch() color spaces: Replaced the standard linear RGB gradients with oklch() to eliminate the gray/muddy midpoints and keep color transitions smooth.

Balanced contrast: Subdued the static default state so the link text is much easier to read at a glance.

Amplified hover micro-interactions: Reserved the strong neon glassmorphism glow and accent color pop specifically for the active hover state.

Appreciate everyone who pointed out the Web 2.0 vibe and contrast issues—the UI looks significantly cleaner now.

Here is the updated core CSS snippet for anyone interested in the oklch() hover structure:

.aqua-btn {
background: linear-gradient(
90deg,
oklch(65% 0.18 270 / 0.85) 0%,
oklch(82% 0.12 210 / 0.85) 30%,
oklch(92% 0.08 190 / 0.85) 65%,
oklch(95% 0.09 110 / 0.85) 100%
);
border: 2px solid rgba(255, 255, 255, 0.8);
color: oklch(25% 0.25 290);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aqua-btn:hover {
color: #fff;
border: 2px solid #fff;
transform: translateY(-2px);
box-shadow:
0 0 20px oklch(75% 0.2 220 / 0.6),
0 8px 25px rgba(128, 128, 255, 0.5);
}

Let me know what you think of the revised contrast!

Hey everyone, just wanted to throw out some positive energy.
I know a lot of people here spend crazy hours locked in, slamming energy drinks, hunting down broken layouts, and fighting CSS variables at 2 AM. It’s easy to get burned out, stressed, and hyper-critical when you’ve been staring at a screen for 10 hours straight.
As someone fresh on this journey, I just want to say respect to everyone putting in the work. Don't forget to step away from the keyboard for a minute, grab some water, stretch, and give your eyes a break.
The code will still be there when you get back. Keep building! 🤝

[ Removed by Reddit on account of violating the content policy. ]

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-login/](https://zikreddincikla.github.io/neumorphism-login/) GitHub Repo: [https://github.com/zikreddincikla/neumorphism-login](https://github.com/zikreddincikla/neumorphism-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!

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!

Need honest feedback

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!)

Hello, so im going over an old website I made back when I first started developing, and silly me decided to build the entire thing with "position: relative, right: -233px" 😭

Am I going to have to redo the entire site CSS to flexbox so it doesnt move about on different screen sizes, or is there an easier way to save this site?

im using react aswell, the issue i see is that despite setting the "main" to 100% for both width and height, it seems like, the height is 50% and the width is like 150%, i read up on the docs of both mdn and w3schools, but having hard time understanding sizing in regrads to the parent (uppermost element)

html, body { margin:0; }

.main { padding-top: 124px; display: flex; flex-direction: column; padding-left: 292px; height: 100%; width: 100%; background-color: #2F3337; }

export function Landing_page(){ return ( <main className="main"> <header className="header">

Just completed a project where I used Tailwind exclusively. It's speedy to write but the HTML became a bit hairy. Anyone working on big, long-running enterprise-style projects - still choose to use Tailwind or have you found yourself moving back to Vanilla CSS / CSS Modules for a bit cleaner markup. Curious.

I want to make a transition of the backgrund image of a div. background-image is not animatable, so I need a trick.

My solution is to put a second div with white background right under the div with background, and give my div with background two animations: one that swaps the background, and a second one that toggles the opacity (thus showing the white div under).

test {
width: 300px;
height: 300px; 
border: 5px black solid;
animation: 
  backgroundTransition 5s alternate infinite,
  backgroundSwap 50s forwards infinite;
}

@keyframes backgroundSwap {
  0%, 20% {background-image: radial-gradient(blue 0%, blue 100%);
  }
  40% {background-image: radial-gradient(red 0%, red 100%);
  }
  60% {background-image: radial-gradient(yellow 0%, yellow 100%);
  }
  80% {background-image: radial-gradient(purple 0%, purple 100%);
  }
  100% {background-image: radial-gradient(green 0%, green 100%);
  }
}

@keyframes backgroundTransition {
  0% {opacity: 0;}
 20% {opacity: 1;}
}

The result of the two animations should be this: at 0s the div appears all white, then from 0s to 1s it fades into the first image and stays like that until 9s, when it fades back into white. This repeats four more times, with the image changing each time.

However it doesn't work. The two animations are not synchronized, in spite of the fact that the timing should be the correct one. I dislike the idea of merging the two animations together, it would needlessly complicate things and slow down debugging (particulatly since I want to add some more effects to the background images, which would further complicate things). But I can't seem to find a way to ensure the two animations have the correct timing.

Am I doing something wrong? Any suggestions?

Hey y’all,

I got slightly carried away with loading animations.

I wanted nicer loading states for my own projects, but most libraries I found were either tied to a framework, fairly limited, or required more than I wanted for something this small.

So I built loadersz, a small framework-agnostic loader library for the web.

I wanted something a bit more expressive than the usual CSS spinner, without pulling in a UI framework or a bunch of dependencies.

A few things I focused on:

- 105 different motion states
- Canvas 2D instead of GIFs/videos
- zero core dependencies
- a native custom element, so it works with basically any stack
- typed entry points for React, Vue and Svelte
- configurable speed, density and color
- respects prefers-reduced-motion
- pauses rendering when the browser tab is hidden

Basic usage is just:

npm install loadersz

import 'loadersz';

<loadersz-loader state="racing" size="96" />

I also built an interactive playground where you can tweak the loaders live.

Demo: [loadersz.vercel.app](https://loadersz.vercel.app)
npm: [npmjs.com/package/loadersz](https://www.npmjs.com/package/loadersz)
Github: https://github.com/lumberjacque/loadersz-core

Would love some brutally honest feedback, especially on which animations you’d actually use in a real product.

I didn't understand how this worked until recently, I only knew that @property changed the results. Anyway, I figured it out, and wrote up what I learned. I hope this is useful for others!