CSS reset generator — modern, minimal or normalise-style

Choose a reset style and the extras you want, and the tool writes a commented reset.css that removes the browser defaults that get in the way while keeping the ones that help.

Live demo · real result from this tool
Style

reset.css

/* Modern CSS reset */ /* 1. Predictable sizing: padding and border are inside the width */*, *::before, *::after {  box-sizing: border-box;} /* 2. Remove default margins */* {  margin: 0;} /* 3. Comfortable reading defaults */html {  -webkit-text-size-adjust: none;  text-size-adjust: none;} body {  min-height: 100vh;  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 4. Headings need tighter line height */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
}

/* 5. Remove list styles only where a role says it is a list for layout */
ul[role="list"], ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* 6. Anchor targets clear sticky headers */
:target {
  scroll-margin-block: 5ex;
}

/* Media is block-level and never overflows its container */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

/* Form controls inherit the page's typography */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

textarea:not([rows]) {
  min-height: 10em;
}

/* Avoid overflowing long words; balance headings */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Respect the user's reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Processed on your device — nothing is uploaded.

How to use the CSS reset generator

  1. Choose the Style: Modern, Minimal or Normalise-style.
  2. Tick Responsive media defaults so images and videos never overflow their container.
  3. Tick Form controls inherit fonts so inputs and buttons use your page font.
  4. Tick Text wrapping helpers and Respect reduced motion as you like.
  5. Save the output as reset.css and load it before your other styles.

What it does and when to use it

Every browser applies its own default styles: margins on headings and paragraphs, small system fonts in form fields, images that can spill out of narrow columns. A reset evens these out so your own CSS behaves the same everywhere.

Use it at the start of any hand-written stylesheet or small site without a framework. Put your design tokens from the CSS variables generator right after the reset, and add breakpoints with the media query generator. Tailwind already includes its own reset, so skip this file if you use the Tailwind config generator.

How it works

All three styles start with box-sizing: border-box on every element, so padding and borders sit inside the width you set.

Style What it adds
Modern Removes all margins; body line-height: 1.5 and min-height: 100vh; tighter heading line height; list styles off for role="list"; :target clears sticky headers; turns off automatic text inflation on mobile
Minimal Removes all margins; body line-height: 1.5
Normalise-style Keeps margins; fixes h1 size, bolder for b and strong, monospace code, sub/sup and table borders

The extras are added after the style: block-level media with max-width: 100%, form controls with font: inherit, text-wrap: balance for h1 to h3 and pretty for paragraphs, and a prefers-reduced-motion block. MDN covers the box-sizing property in detail.

Worked examples

Modern with all extras (defaults). Besides the margin and sizing rules, the file includes:

/* 6. Anchor targets clear sticky headers */
:target {
  scroll-margin-block: 5ex;
}

and img, picture, video, canvas, svg with display: block and max-width: 100%.

Bare minimum. Style Minimal with every extra unticked. The whole file is the border-box rule, * { margin: 0; } and body { line-height: 1.5; }.

Normalise-style, no media rule. The output keeps a 2em h1 with margin: 0.67em 0; and font-weight: bolder; for b and strong, plus the form, text-wrap and reduced-motion extras.

Limits and tips

  • Media become block elements. An image inside a line of text will start on its own line; set display: inline on that image if needed.
  • Text-wrap rules are ignored by browsers that do not support them yet, which is harmless.
  • Margins are gone in Modern and Minimal. Add spacing back with your own rules, for example a gap between paragraphs.

Frequently asked questions

What is the difference between a reset and normalize?
A reset removes browser defaults, such as all margins, so you start from a blank page. A normalise-style file keeps useful defaults, such as bold strong text and larger h1 headings, and only makes them consistent across browsers. The Normalise-style option here follows the second approach.
Why does the modern reset only remove list styles from lists with role="list"?
Some screen readers stop announcing a list as a list when its bullets are removed with CSS. Adding role="list" to navigation or card lists restores that, and the reset uses the same attribute to know which lists you styled on purpose.
Where do I put the reset in my stylesheet?
First, before any of your own rules, so your styles override it. With a build tool, import reset.css at the top of your main CSS file.
Will the reduced-motion rule break my animations?
Only for people who turned on reduced motion in their system settings. For them, animations and transitions finish almost instantly and smooth scrolling is turned off. Everyone else sees your animations as normal.

How do we know nothing is uploaded? Test it yourself on the privacy proof page.

Written by the ToolsRift team · Last updated

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Related tools

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close