CSS by hand

Tools

They run in your browser, store nothing and hand you CSS ready to paste.

• 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.

Recipes

The snippets I copy again and again, with a live demo next to each to show they work.

• Style the parent by its children: :has()
• Container queries
• Animate a popover in
• Light and dark with light-dark()
• A grid that fits itself
• Order the cascade with @layer

All the recipes →

Links

My CSS bookmarks, sorted by topic. They come from the shelf on joedoe.dev.

• Flexbox and grid 24
• Motion and easing 25
• Shadows, glass and filters 20
• Shapes and borders 15
• Backgrounds and patterns 14
• Components and generators 21
• Art with nothing but CSS 11
• Frameworks and utilities 31
• Quality and performance 21
• Methodology, Sass and email 11
• Reference and notes 16
• The pulse of CSS 9
• People with style 81

All the links →