CSS Tricks

CSS Tricks

Quick CSS tips and techniques

Small CSS tricks to handle interface details: layouts, subtle effects, simple animations and micro-interactions. These examples are meant to make it easy to grasp the pattern, adapt it to your design and keep your visual code clean and consistent.

Fluid Sizing with clamp()

Smooth responsive sizes without media queries. One line of CSS that scales between min and max values.

#css #responsive #typography

Browser support: Chrome 79+, Firefox 75+, Safari 13.1+

Animate Height with Grid

Finally animate to auto height! Use grid-template-rows from 0fr to 1fr for smooth accordion animations.

#css #animation #grid

Browser support: Chrome 107+, Firefox 110+, Safari 16.4+

Motion Path Animation

Animate elements along custom curves and SVG paths without JavaScript.

#css #animation #svg

Browser support: Chrome 55+, Firefox 72+, Safari 15.4+

Container Queries

Components that respond to their container's size, not the viewport. Perfect for reusable UI.

#css #responsive #container-queries

Browser support: Chrome 105+, Firefox 110+, Safari 16+

Avoid Universal Selector Resets

Why * { margin: 0 } hurts performance and what to use instead.

#css #performance #reset

Browser support: Chrome 1+, Firefox 1+, Safari 1+

Circle: border-radius vs clip-path

Two ways to make circles, but only clip-path gives you a circular click area.

#css #shapes #clip-path

Browser support: Chrome 55+, Firefox 54+, Safari 9.1+

Light Sweep with Conic Gradient

Create a rotating light beam effect using conic gradients and CSS animation.

#css #animation #gradients

Browser support: Chrome 85+, Firefox 91+, Safari 15.4+

Alt Text for CSS Content

Add accessible descriptions to images injected via CSS content property.

#css #accessibility #a11y

Browser support: Chrome 77+, Firefox 104+, Safari 17.4+

CSS corner-shape

Squircle, bevel, scoop, and notch corners without SVG or masks.

#css #shapes #experimental

Browser support: Chrome 128+

CSS Multi-Column Layout

Newspaper-style text columns that adapt without media queries.

#css #columns #layout

Browser support: Chrome 50+, Firefox 52+, Safari 10.1+

Step Counters with CSS

Display 'Step X of Y' automatically using CSS counters and :has().

#css #counters #has-selector

Browser support: Chrome 105+, Firefox 121+, Safari 15.4+

CSS Masks

Control opacity with gradients and shapes for ink fades and soft transitions.

#css #masks #effects

Browser support: Chrome 120+, Firefox 115+, Safari 15.4+

Pure CSS Tooltips

Lightweight tooltips using data attributes and pseudo-elements.

#css #tooltips #attr

Browser support: Chrome 4+, Firefox 2+, Safari 3.1+

Dynamic Form Labels with :has()

Auto-add asterisks to required fields and '(optional)' to optional ones.

#css #forms #has-selector

Browser support: Chrome 105+, Firefox 121+, Safari 15.4+

Zigzag Layout with Flexbox

Alternate card layouts without changing HTML using nth-child and flex-direction.

#css #flexbox #layout

Browser support: Chrome 29+, Firefox 28+, Safari 9+

Gradient Text

Colorful gradient headlines with pure CSS - no images required.

#css #gradients #typography

Browser support: Chrome 4+, Firefox 49+, Safari 5+

Multi-Line Truncation

Limit text to specific number of lines with ellipsis using line-clamp.

#css #typography #truncation

Browser support: Chrome 6+, Firefox 68+, Safari 5+

Background Removal with Blend Modes

Remove white or black backgrounds from images using mix-blend-mode.

#css #blend-modes #images

Browser support: Chrome 41+, Firefox 32+, Safari 8+

Safe Area Insets

Adapt layouts for device notches and gesture bars using env().

#css #mobile #responsive

Browser support: Chrome 69+, Firefox 65+, Safari 11.1+

Tailwind Child Selectors

Style all child elements from the parent using [&_selector] syntax.

#tailwind #css #selectors

Browser support: Chrome 1+, Firefox 1+, Safari 1+

Mirror Reflection Effect

Create glass-surface reflections using -webkit-box-reflect.

#css #effects #reflection

Browser support: Chrome 4+, Safari 4+, Edge 79+