CSS Normalize Generator
Build a normalize stylesheet that contains only what your project needs. The rules come from normalize.css 8, organised in its familiar sections. Keep everything for maximum compatibility, or target current browsers and leave out the fixes for Internet Explorer and the old Edge. Choose sections, keep the original explanatory comments or strip them, and optionally wrap the result in a cascade layer.
- Runs in your browser
- No sign-up
- Free to use
How to use CSS Normalize Generator
- Choose current browsers or full legacy support.
- Tick the sections you need.
- Decide on comments, border-box sizing and @layer.
- Copy normalize.css into your project.
CSS Normalize Generator features
normalize.css 8 rules
The well-known fixes, with MIT licence attribution.
Modern mode
Drops rules only Internet Explorer and Edge Legacy need.
Sections
Document, sections, grouping, text, embedded, forms, interactive, misc.
Comments
Original explanations with numbered notes, or compact output.
Optional extras
Border-box sizing and @layer normalize.
Licence kept
/*! comment survives minification.
When to use CSS Normalize Generator
- Consistent form controls across browsers.
- A lighter normalize for projects without Internet Explorer.
- Understanding what each normalize rule fixes.
- Building a base layer for a design system.
CSS Normalize Generator FAQ
What is the difference between normalize and reset?
normalize.css keeps useful defaults, such as heading sizes and list bullets, and only fixes inconsistencies between browsers. A reset removes defaults so you style everything yourself.
Is normalize.css still needed?
Browsers are much more consistent than they used to be, but form controls, sub and sup, abbr, monospace sizing and a few other details still differ. The modern mode keeps only those fixes.
What is removed in modern mode?
Rules that only Internet Explorer 10–11 or Edge Legacy need, such as main { display: block }, template and [hidden] display rules and textarea overflow.
Can I use it with a reset?
Usually you pick one. Some projects combine a light normalize with border-box sizing, which the generator can add.
Is it allowed to modify normalize.css?
Yes. normalize.css is MIT licensed; keep the licence comment at the top, which the generator does.
Is anything uploaded?
No. The CSS is generated in your browser.
Normalizing browser styles
Browsers render the same HTML slightly differently. A <sub> element shifts the line height in some, code text is too small in others, buttons do not inherit fonts, search inputs look different on Apple devices and fieldsets have odd padding in Firefox. normalize.css, first released in 2012, fixes these differences while keeping sensible defaults.
The generator offers the rules of normalize.css 8.0.1 in the original sections and with the original comments, which explain which browser each line is for. Numbered notes inside the comments match the /* 1 */ markers on individual declarations, so you can see exactly why a property is there.
Many of those fixes were written for Internet Explorer and the pre-Chromium Edge, which are no longer supported by Microsoft. In modern mode those rules are left out, giving a shorter stylesheet that still fixes the inconsistencies that remain in current Chrome, Edge, Firefox and Safari.
You can also include only the sections you need. A site with very few forms might skip the forms section; a component library might want only forms and text-level rules. Comments can be removed for a compact file, and the licence comment uses /*! so minifiers keep it.
For new projects, wrapping the result in @layer normalize lets your own styles override it without fighting specificity, and adding border-box sizing combines the most popular reset rule with normalize’s gentler approach.