EspañolModern CSS reset generator
Tick the rules. Each one has a short comment explaining what it fixes, so you can understand and adjust it instead of copying blindly.
The CSS that goes at the top of every site
Available in: 
Modern CSS reset generator: what it is for
Every project starts by fixing the same things: default margins, box-sizing, images that overflow the layout, form fields in another font and long words that break the layout on phones.
Tick the rules you want and copy a short, commented reset, with box-sizing border-box, minimum height in dvh, responsive media, font: inherit on forms, overflow-wrap, text-wrap balance and pretty on headings and paragraphs, smooth scrolling only for people who did not ask for less motion and animations turned off for those who did.
How to use
- Tick the rules you want to use.
- Read the comment on each one.
- Copy or download reset.css and put it at the top of your CSS.
When to use it
- Starting a website from scratch.
- Standardizing a team's projects.
- Understanding what each reset rule does.
Frequently asked questions
What is a CSS reset?
A small set of rules placed at the start of your CSS to remove annoying browser differences and defaults, such as margins on the body, images that overflow the layout and form fields in a different font. It makes the rest of the CSS easier to write.
Reset or normalize?
normalize.css keeps default styles and only fixes differences between browsers; a modern reset goes a little further and removes what you almost always override. Today's browsers are much more alike, so short resets like this one have become the most popular.
Why is smooth scrolling inside a media query?
Animated scrolling can cause nausea in people sensitive to motion. Inside prefers-reduced-motion: no-preference, it is only turned on for people who did not ask their system for less motion.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.