GENERATORS

CSS Boilerplate Generator

Build a modern CSS starter — pick a reset (Andy Bell, Josh Comeau, normalize-lite or minimal), toggle the base rules, generate a design-token block with light/dark colours, a spacing and radius scale and fluid type, then see it live in a preview and copy or download style.css.

What this tool does

It assembles the top of a stylesheet — a reset, sensible base rules, and a block of custom properties — from options you choose, and shows the result rendered in a live preview.

Resets

Andy Bell's modern reset — small, opinionated, widely used. Josh Comeau's — adds font smoothing and an #root stacking context. normalize-lite — keeps useful browser defaults, just evens out the differences. Minimal — only box-sizing and margin.

Base rules

Each is a checkbox: block-level media with max-width, font: inherit on form controls, a root line-height, -webkit-text-size-adjust, smooth scrolling wrapped in a prefers-reduced-motion guard, text-wrap: pretty on headings, and an accessible :focus-visible outline.

Design tokens

A :root block with colour tokens (and a prefers-color-scheme: dark or [data-theme] override), a font stack, a spacing scale, a radius scale, shadows, a container width, and optional clamp() fluid type steps.

Privacy

Everything runs in your browser. Nothing is uploaded.

FAQ

Frequently asked questions

Which reset should I pick?

Andy Bell's modern reset is a safe default for most projects. Use normalize-lite if you want to keep browser defaults for headings and lists; minimal if you already have your own base styles.

What is the reduced-motion guard?

The smooth-scroll rule is wrapped in @media (prefers-reduced-motion: no-preference) so that users who ask their OS to reduce motion get instant jumps instead.

How does the dark mode option work?

It re-declares the colour tokens either inside @media (prefers-color-scheme: dark) — automatic — or under [data-theme="dark"] — a manual toggle you control with a class or attribute.

What does the @layer output do?

It wraps the reset, tokens and base rules in @layer reset, tokens, base { … } so your later component styles always win regardless of source order.

Is anything sent to a server?

No. The CSS is assembled entirely in your browser.