CSS Reset Generator

Pick a CSS reset style — minimal modern, Eric Meyer, Normalize, or Tailwind Preflight — and copy the code.

Style: Minimal modern resetSelectors Reset: 6Size (chars): 330Lines: 25

Reset Styles

Minimal modern reset

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

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

CSS resets explained

CSS resets normalise inconsistent browser defaults so your styles start from a predictable baseline. The Minimal modern reset(by Josh Comeau) is the right choice for new projects — it's small, targets modern pain-points like font inheritance and image layout, and leaves sensible defaults in place. Eric Meyer's Reset zeros everything for maximum control but requires you to redeclare all styling. Normalize opts to preserve useful defaults and fix bugs rather than remove defaults. Tailwind Preflight is bundled automatically when using Tailwind CSS.

After applying a reset, use the CSS Minifier to compress it for production.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Choosing between a full reset and a normalising approach for a new project.
Producing a minimal set of overrides rather than importing a whole library.
Comparing what each approach actually changes before adopting one.
Generating a baseline to sit above a component library's own styles.
Replacing an old reset with something narrower after auditing what you rely on.

Frequently Asked Questions

Why is a reset needed at all?: Because browsers ship differing default stylesheets — margins on headings and paragraphs, list padding, form control appearance. A reset removes or normalises them so your styles start from a known state rather than from eight slightly different ones.
What is the difference between a reset and normalize?: A reset strips defaults to zero; normalize preserves useful ones and fixes inconsistencies. Modern practice sits between the two — remove the margins, keep the semantics, and add the handful of improvements no browser applies by default.
Why is box-sizing: border-box in every modern reset?: Because the default `content-box` excludes padding and border from the declared width, so a 200px box with 20px padding occupies 240px. Border-box makes the declared width the actual width, which is what everyone expects and almost nobody wants the alternative to.
What else belongs in a modern reset?: `max-width: 100%` on images to stop overflow, `font: inherit` on form controls so they follow the page, `line-height` set on the body, and a `prefers-reduced-motion` block disabling animation. None of them are defaults and all of them are near-universal.
Can a reset harm accessibility?: Yes, when it removes focus outlines or strips heading sizes without replacing them. The classic mistake is `outline: none` with no substitute, which leaves keyboard users with no visible focus at all — a WCAG failure introduced by a stylesheet meant to help.

Common errors and gotchas

Applying a full reset and then rebuilding every default it removed, which is more work than normalising.
Removing focus outlines as part of a reset, which breaks keyboard navigation.
Loading a reset after component styles, so it overrides the very rules it should precede.
Resetting margins globally and then fighting the collapse behaviour you removed.
Assuming a reset makes browsers identical. It narrows differences; it does not eliminate them.