CSS is the design language of the web – controlling layouts, typography, animations, and responsive behavior. This category covers both fundamentals and modern features you can start using today.
New to CSS? Start with the complete beginner’s guide. For layouts, explore the CSS Grid guide and the Flexbox guide. You’ll also find guides on modern features like native CSS nesting, the :has() selector, CSS variables, and @property.
The CSS backdrop-filter property applies visual effects to the area behind an element. Unlike filter, which affects the element itself, backdrop-filter transforms what shows through from behind – creating frosted glass, blurred overlays, and color-shifted surfaces without touching the underlying [...]
A good hover effect on a button isn’t just cosmetic – it signals to the user that the element is interactive and responsive. A static button with no visual feedback feels flat and lifeless. In this post, I’ll showcase 43 [...]
Picture this: you build a product card component. It looks perfect in the main content area – image on the left, details on the right, nice and spacious. Then your designer drops it into a 280px sidebar. It implodes. Text [...]
If you’ve ever built a full-screen hero section on mobile and watched it overflow behind the address bar, you already know the problem. I’ve dealt with this on dozens of projects, and it’s one of those bugs that makes you [...]
The CSS clip-path property draws a hard boundary – everything outside disappears. But what if you want content to gradually fade, dissolve through a pattern, or reveal itself through a shaped window? That’s where mask-image comes in. I use mask-image [...]
For years, border-radius was the only tool we had for shaping corners in CSS. It could round them – and that was about it. Every bevel, notch, or squircle required SVGs, images, or clip-path workarounds that broke borders and shadows. [...]
The CSS aspect-ratio property lets you define the proportional relationship between an element’s width and height. Instead of setting both dimensions explicitly, you define the ratio and let the browser calculate the other dimension automatically. This is useful everywhere – [...]
The @property at-rule gives CSS custom properties something they never had: a type system. You can tell the browser that a variable is a color, an angle, or a length, and suddenly things like gradient transitions and type-safe fallbacks just [...]
CSS allows borders with a single color, but it does not support gradients by default. With a few reliable techniques, you can still add gradient borders to buttons, cards, and sections to make key elements stand out. In this post, [...]
The CSS image-set() function allows you to provide multiple versions of an image so browsers can automatically choose the most optimal one. This improves performance, ensures compatibility with older devices, and avoids manual detection logic. In modern web development, image-set [...]