CSS reset generator
A reset removes the browser differences that make layouts unpredictable. Choose only the rules your project needs and copy a tidy stylesheet for the top of your CSS.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Tick the rules you want. The rules most projects use are ticked at the start.
- Decide whether you want a comment above each rule, or minify the result.
- Copy the CSS and paste it at the top of your main stylesheet, or save it as
reset.css.
How it works
Each checkbox adds one self-contained block of CSS, and the blocks are joined in a fixed order. The comment option puts a one-line explanation above each block. Minify strips comments and whitespace from the blocks with a simple pass, which is safe here because the blocks contain no strings or url() values.
Example
With only border-box sizing and removed margins ticked, the result is *, *::before, *::after { box-sizing: border-box; } followed by * { margin: 0; }. A box set to width 300px with 20px of padding then stays 300px wide.
Tips
- Do not tick rules you will not use: every extra rule is something you may have to undo.
- The list rule only affects lists marked
role="list". Safari with VoiceOver can stop announcing a list once its bullets are removed, and the explicit role restores it.
Frequently asked questions
What is a CSS reset?
It is a small stylesheet loaded before your own CSS that sets common properties to predictable values, so the same markup looks alike in different browsers and you do not have to undo default margins or form styles one by one.
Reset or normalize: which should I use?
A reset removes defaults such as margins on purpose. A normalize-style sheet keeps most browser defaults and only fixes inconsistencies. This generator is a reset, but you can leave out any rule that you would rather keep, such as lists or links.
Where does the CSS come from?
The rules are written for this tool around widely used modern reset ideas: a predictable box model, no default margins, fluid media, form fonts that inherit, and respect for reduced motion. It is not a copy of a specific published reset.
Is the reduced motion rule a good idea for every site?
It shortens animations and transitions for visitors whose system asks for less motion. If an animation carries essential information, keep that one working with its own rule inside the same media query.
Why does the order of my CSS matter?
The reset sets low-specificity defaults, so put it first. Your own rules later in the file then override it without needing higher specificity.