Tools

Small, no sign-up and no ads. Change the values, watch the result and copy the CSS.

• clamp()Fluid typeGive it the smallest size, the largest and the widths it grows between: you get the clamp() back.
• --space-*Space scaleA spacing scale as custom properties, so you stop making numbers up.
• box-shadowLayered shadowsSeveral soft shadows stacked, which is how real ones look. Tweak and copy.
• oklch()Colour → paletteFrom one colour to a 50–950 scale in OKLCH, with lightness spread for human eyes rather than a machine's.
• WCAGContrastTwo colours and you know straight away whether the text reads: WCAG ratio and whether it passes AA or AAA.
• cubic-bezier()Easing curvesDrag the curve's two handles and watch it move before you copy it. With the usual ones close at hand.
• (0,1,0)SpecificityPaste selectors and see which one wins and why, with :is(), :not(), :has() and :where() counted properly.

Missing one? The links have over 200, by people who make them better than I do. See the links →