Complete CSS Reference

Shorthand for background-color, background-image, background-position, background-size, and more.

Control element borders including width, style, colour, and corner rounding with border-radius.

Add one or multiple shadow effects around an element's frame with offset, blur, spread, and colour.

Set the foreground colour of text and text decorations. Accepts hex, RGB, HSL, named colours, and more.

Set the transparency level of an element and all its children. Range: 0 (invisible) to 1 (fully visible).

Apply graphical filters: blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, and sepia.

Control how an element is rendered — block, inline, flex, grid, none, inline-flex, and more.

All flexbox properties: flex-direction, align-items, justify-content, flex-wrap, gap, flex-grow, and more.

All grid properties: grid-template-columns, grid-template-rows, grid-area, gap, auto-fill, fr units.

Control element positioning: static, relative, absolute, fixed, and sticky — with top, left, right, bottom.

Control the stacking order of positioned elements. Understand stacking contexts and how z-index really works.

Control what happens when content exceeds an element's box: visible, hidden, scroll, auto, clip.

Shorthand for font-family, font-size, font-weight, font-style, font-variant, and line-height.

text-align, text-decoration, text-transform, text-overflow, white-space, letter-spacing, and line-height.

CSS variables with --property-name syntax. Scope, inheritance, fallbacks, and using var() in calculations.

Animate property changes smoothly. Control duration, timing function, delay, and which properties transition.

Create complex CSS animations with @keyframes. Control name, duration, timing, delay, iterations, and fill-mode.

Apply 2D and 3D transformations: translate, scale, rotate, skew, perspective, and matrix.