// GENERATED CSS RESET
// configure and download a tailored CSS reset in seconds
Configure and download a tailored CSS reset in seconds. Choose from reset presets or toggle individual sections — box model, typography, links, forms, media, scroll and more.
Start with one of the six curated presets — Modern, Minimal, Normalize, Meyer, Sanitize, or Opinionated — to pre-configure the sections toggle list.
Enable or disable individual reset sections to include exactly what your project needs. The preview updates instantly with line count and file size.
Click "↓ Download" to save a reset.css file, or "⎘ Copy" to paste directly into your project. Choose minify for a single-line output.
A CSS reset is a stylesheet that neutralises the inconsistent default styles browsers apply to HTML elements. This generator lets you compose your own reset from named sections — box model, typography, links, lists, forms, media, tables, scroll, accessibility — and choose your preferred baseline philosophy via the preset buttons.
A CSS reset is a set of rules that strips or normalises the inconsistent default styles that browsers apply to HTML elements. Different browsers have different defaults for margins, padding, font sizes, and list styles — a reset brings them all to a common baseline so your own styles start from a predictable state.
A reset (like Meyer's) aggressively removes all browser defaults, leaving bare elements with no margin, padding, or styling at all. A normalize (like normalize.css) preserves useful defaults and only corrects inconsistencies between browsers. A modern reset typically falls somewhere between — removing what gets in the way while keeping sensible defaults.
Yes, for almost every project. The border-box model includes padding and border in an element's stated width and height, which is far more intuitive for layout work. The universal *, *::before, *::after { box-sizing: border-box } rule is included in the Box Model section and is considered best practice since 2014.
Minimally. A typical reset is only a few hundred bytes — negligible compared to your main stylesheet. Minifying it reduces it further. The performance impact on page rendering is essentially zero, while the consistency benefit is significant across your entire project's lifetime.
The reset should be the very first stylesheet linked in your HTML <head>, or the first @import in your main CSS file. This ensures it loads before any author styles and that your rules always override the reset, not the other way around.
The Opinionated preset goes beyond neutralising defaults — it applies a small set of broadly useful styles: sensible line-height, improved text rendering, fluid media, and accessibility-friendly focus styles. It is closer to a "base stylesheet" than a pure reset, and works well as a starting point for custom design systems.
Every browser ships with its own set of default styles — margins on headings and paragraphs, bullet points on lists, blue underlines on links, indentation on blockquotes. These defaults vary between Chrome, Firefox, Safari, and Edge, making consistent cross-browser styling surprisingly difficult without a reset as your starting point.
Eric Meyer's original CSS reset from 2007 zeroed out virtually every property on every element. While thorough, this meant you had to re-declare even the most basic styles like font size and list markers from scratch. Modern resets (like Andy Bell's "A Modern CSS Reset") take a lighter touch — only targeting the rules most likely to cause problems, and leaving useful browser defaults intact.
box-sizing: border-box rule and the margin: 0; padding: 0 reset. Essential for predictable layout.text-size-adjust for consistent text rendering.ul and ol so they can be styled freely.max-width: 100%; height: auto;.scroll-behavior: smooth and scroll-margin-top for anchor navigation. Respects prefers-reduced-motion.hidden attribute are not displayed.