CSS Units Cheat Sheet

CSS has dozens of length units. Pick the one whose 'relative to' matches the design intent, don't default to px for everything.

Absolute units

`px`	Pixel, fixed size. Use for borders and small fixed offsets.
`pt, pc, in, cm, mm`	Print units. Rarely needed on the web.

`em`	Relative to the parent's font size. Compounds, careful with nesting.
`rem`	Relative to the root font size. The go-to for typography.
`ex`	Height of the lowercase x, rare.
`ch`	Width of '0', perfect for character-based widths (code blocks).
`cap`	Cap height, newer, less supported.
`lh, rlh`	Line height of element / root.

`vw, vh`	1% of viewport width/height.
`vmin, vmax`	1% of the smaller / larger viewport dimension.
`svh, lvh, dvh`	Small/large/dynamic viewport height, handle mobile URL bar correctly.
`svw, lvw, dvw`	Same idea for width.

`%`	Relative to the parent's same property.
`fr`	Fraction of the available space in a grid track.

`auto`	Let the browser decide based on context.
`min-content, max-content, fit-content`	Intrinsic sizes based on the content.
`calc(100% - 16px)`	Mix units arithmetically.
`clamp(min, ideal, max)`	Responsive sizing without media queries.

CSS Gradient Generator

Create beautiful CSS linear and radial gradients with a visual color picker.

CSS Grid Generator

Design CSS Grid layouts visually and export the code.

Color Format Converter

Convert colors between HEX, RGB, HSL, and other formats instantly.