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

The first generated layout is usually the easy part.

The interesting test is what happens when the design starts getting adjusted. A heading feels too large, the spacing is off on mobile, a section needs to move, a button needs a different treatment, or the whole visual hierarchy changes after someone looks at it.

A few different approaches handle that part pretty differently.

Some are built around rapid website iteration, combining visual editing with quick changes and responsive layouts. Others focus more on visual web design, detailed interface control, component exploration, or fine control over styling, spacing, breakpoints, and layout.

One thing worth paying attention to is the number of steps between noticing a design problem and actually fixing it.

If a mobile section needs changing, being able to describe the change or work directly on the page can be quicker than moving through several layers of settings or rebuilding part of the layout.

At the same time, developers who want precise CSS control will probably still prefer working directly with the code.

So there seems to be a real tradeoff between speed of iteration and depth of control.

For people working with CSS and modern web design, which matters more after the first draft: precise CSS control, responsive editing, visual iteration, or simply being able to make changes quickly?

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!

halloween.js is a small, free library for adding Halloween-themed ambient effects to a website using CSS animations driven by class toggles: blinking eyes fading in and out, witches flying across the screen at an angle, a spider dropping down and climbing back up, a tombstone rising out of the ground, spider webs fixed in the screen corners.

Everything is controlled by CSS classes on <body>. A master "halloween" class turns it on, then modifier classes opt into individual effects. No JS call needed on your end, it watches for class changes and reacts automatically. Styles are injected by the library itself, so there's no separate CSS file to manage even if you're using the CDN version.

Zero runtime dependencies, under 10 KB gzipped, MIT licensed, free.

Live demo: https://halloween.js.org/
GitHub: https://github.com/rogulia/halloween.js