CSS Reset Generator

Generate customized CSS reset or normalize stylesheets.

Reset Options

Box Sizing Border-BoxRemove MarginsRemove PaddingReset Font SizeInherit Line HeightRemove List StylesBlock Display for ImagesCollapse Table BordersReset Button StylesInherit Input FontsText Decoration SkipSmooth ScrollingReduce Motion Support

About CSS Resets

A CSS reset removes default browser styling to provide a consistent baseline across different browsers. This generator creates a modern, customizable reset based on best practices.

Note: If you're using a CSS framework like Tailwind, Bootstrap, or a UI library, they typically include their own reset. Check before adding a custom one.

Enabled Rules

Generated CSS

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

/* Reset defaults */
* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: inherit;
}

/* Root styles */
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

/* Body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Remove list styles */
ul, ol {
  list-style: none;
}

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

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Button reset */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* Form elements inherit fonts */
input, button, textarea, select {
  font: inherit;
}

/* Respect user preferences for reduced motion */
@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;
  }
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Reset Generator?

Generate a tailored CSS reset or normalize stylesheet. Choose between opinionated modern reset, normalize.css style, or a minimal baseline.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Reset Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Choose reset style

Modern reset: removes problematic defaults only. Normalize: equalises cross-browser inconsistencies without removing all defaults. Minimal: box-sizing and margin only.

Select optional additions

Toggle additions like font-smoothing, scroll-behavior: smooth, or overflow-wrap: break-word based on your project needs.

Copy and add to your project

The reset goes in your global CSS file before any component styles. It should be the first CSS loaded.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

reset.css

/* Modern CSS 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;
}

This is the "Modern CSS Reset" approach (popularized by Josh Comeau). It removes defaults that cause problems while keeping browser defaults that help (like :focus styles and form spacing).

Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Removing :focus styles in a reset

Some resets include a:focus { outline: none } to remove the browser focus ring globally. This fails WCAG 2.4.7.

Fix: Never remove :focus outlines globally. Use :focus-visible if you want to hide focus rings for mouse users while keeping them for keyboard users.

Pro tips

Pro tips for better results

★

box-sizing: border-box is the most important reset rule

The default box-sizing: content-box means padding and border add to element width, making layout calculations non-intuitive. border-box makes width include padding and border, matching how most developers think about sizing.

FAQ

Frequently asked questions

If you are using Tailwind CSS, Preflight (its built-in reset based on modern-normalize) is included automatically. Do not add a separate reset. If you are not using Tailwind, use the generated reset.

A CSS reset removes all browser defaults (margins, paddings, font sizes become uniform). Normalize.css preserves useful browser defaults while fixing cross-browser inconsistencies. Modern resets (like Josh Comeau's) are a hybrid: they remove problematic defaults but keep helpful ones.