What is the difference between the presets?

Modern Reset enables box-sizing, margin/padding, font, buttons, and media defaults — a sensible baseline for modern projects. Normalize-lite mimics normalize.css by fixing inconsistencies without zeroing everything. Minimal only zeros margins and padding for the lightest possible reset.

Can I combine a preset with custom checkboxes?

Yes. Select a preset to populate the checkboxes, then toggle individual sections on or off before copying or downloading.

Is the generated CSS production-ready?

Yes. The output is plain, commented CSS with no build step required. Drop it in as the first stylesheet loaded in your HTML.

What does the scrollbar option do?

It adds a minimal custom scrollbar style using ::-webkit-scrollbar for Chromium-based browsers and scrollbar-width / scrollbar-color for Firefox.

CSS Reset Generator

关于此工具

Build a tailored CSS reset by toggling the sections you need: box-sizing, margin/padding zeroing, base font settings, form element normalization, link styles, button resets, list resets, responsive media defaults, and scrollbar styling. Choose from three ready-made presets — Modern Reset, Normalize-lite, and Minimal — then fine-tune with checkboxes. Copy the result to clipboard or download it as reset.css ready to drop into any project.

使用方法

1 Choose a preset or manually check the sections you want.
2 Review the live preview of the generated CSS on the right.
3 Click Copy to Clipboard or Download as reset.css.

Why every project starts by undoing the browser

Before a single line of your own CSS runs, the browser has already applied its user-agent stylesheet — a built-in set of defaults that gives <h1> a large margin, <ul> bullet points and left padding, <body> an 8px margin, and buttons their chunky native chrome. The catch is that these defaults differ between Chrome, Firefox, and Safari. A reset stylesheet neutralises those defaults so your design starts from a known, identical baseline in every browser. This generator builds that reset for you, one section at a time, and outputs plain commented CSS you paste in as the first stylesheet your page loads.

Reset vs. Normalize — and why this tool blends both

There are two philosophies. A hard reset (the Eric Meyer tradition) zeroes everything — margins, padding, list styles — so nothing is styled until you say so. Normalize instead preserves useful defaults and only fixes the inconsistencies between browsers. Neither is universally right. This tool lets you mix them with checkboxes, and ships three presets as starting points:

Preset	Enables	Best when
Modern Reset	Box sizing, margin/padding, font, buttons, media	A typical app where you style most things yourself
Normalize-lite	Box sizing, font, forms, links, media	Content-heavy sites where you want sensible defaults kept
Minimal	Margin/padding only	You already have a framework and just want the 8px body margin gone

Pick a preset to populate the checkboxes, then toggle individual sections. The preview and line count update live, and the output is ready to copy or download as reset.css.

The single most valuable line: box-sizing

If you enable only one section, make it Box Sizing. It emits:

*, *::before, *::after { box-sizing: border-box; }

By default the browser uses content-box, where width: 300px plus padding: 20px plus a 1px border renders as a 342px-wide element — the padding and border are added on top of your declared width. With border-box, the padding and border are drawn inside the 300px, so the element stays exactly 300px wide and your layout math stops fighting you. Applying it to * and the pseudo-elements means it holds everywhere. This one rule eliminates a whole category of "why is my box too wide" bugs.

What the other sections actually do

Margins & Padding zeroes both on every element, wiping the inconsistent heading and paragraph spacing so you can define rhythm deliberately.
Font / Typography sets the modern system-ui font stack, a comfortable line-height: 1.5, and disables iOS's automatic font inflation with -webkit-text-size-adjust.
Form Elements forces inputs and buttons to inherit your font and colour instead of the browser's, since form controls notoriously ignore inherited typography.
Media makes img, video, and svg display: block with max-width: 100% — the standard fix that stops images overflowing their container and removes the mysterious gap below inline images.
Lists, Links, Buttons, Scrollbar strip bullets and default link/button styling, and add a thin custom scrollbar for both Chromium (::-webkit-scrollbar) and Firefox (scrollbar-width).

A worked example

You are building a marketing landing page. You want the browser's bad defaults gone but you still want native form behaviour and sensible typography. Start from Normalize-lite, then add the Media section so hero images stay responsive, and leave Lists off because your footer uses real bulleted lists you don't want to restyle. The preview shows the assembled stylesheet; you click Download and drop reset.css into your <head> before your main stylesheet. Total: a handful of well-chosen rules instead of a 400-line library you only use a tenth of.

Practical tips and common mistakes

Load it first. A reset only works if it runs before your own rules. If you load it last, it overrides your styling instead of clearing the browser's.
Don't double up. Including both a full reset and a framework like Tailwind's preflight applies overlapping rules — pick one base.
Zeroing lists breaks semantics for screen readers in Safari. If you remove list-style from navigation lists, add role="list" back so assistive tech still announces them.
Resetting outline: none on form elements hurts keyboard users unless you add a visible :focus-visible style of your own. Don't leave focus invisible.
Keep it lean. The point of generating your own reset is shipping only what you need. Uncheck anything you won't use rather than copying a kitchen-sink file.