CSS Reset 2025
A modern, minimal CSS reset for 2025.
Copy-paste ready. Works with all modern browsers.
Complete Reset
/* Modern CSS Reset 2025 */
/*
1. Use border-box for all elements
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin and padding
*/
* {
margin: 0;
padding: 0;
}
/*
3. Set up sensible defaults for the root
*/
html {
hanging-punctuation: first last;
color-scheme: dark light;
}
/*
4. Body defaults
*/
body {
min-height: 100svh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/*
6. Inherit fonts for form elements
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
7. Avoid text overflow
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
8. Create a stacking context for React/Next.js apps
*/
#root,
#__next {
isolation: isolate;
}Reset vs Normalize: What's the Difference?
CSS Reset (This Page)
Removes all browser default styles. You start from zero and define everything yourself. Best for: Custom designs where you want full control.
CSS Normalize
Keeps useful defaults and makes styles consistent across browsers. Best for: Projects that want sensible defaults.
View CSS Normalize 2025 →What Each Rule Does
1. Box Sizing
Use border-box for all elements
*,
*::before,
*::after {
box-sizing: border-box;
}Why? Makes width/height calculations include padding and border. No more surprise overflow.
2. Remove Margins & Padding
Strip browser defaults
* {
margin: 0;
padding: 0;
}Why? Browsers add inconsistent default margins. Starting from zero gives you full control.
3. HTML Root Settings
Sensible root defaults
html {
hanging-punctuation: first last;
color-scheme: dark light;
}Why? Enables proper punctuation handling and tells the browser you support both color schemes.
4. Body Defaults
Minimum height and typography
body {
min-height: 100svh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}Why? 100svh ensures full viewport height on mobile. 1.5 line-height improves readability.
5. Media Defaults
Responsive images and media
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}Why? Prevents images from overflowing containers and removes inline gaps.
6. Form Font Inheritance
Make form elements use your fonts
input,
button,
textarea,
select {
font: inherit;
}Why? Form elements don't inherit fonts by default. This fixes that inconsistency.
7. Text Overflow
Prevent long words from breaking layouts
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}Why? Long URLs or words will wrap instead of causing horizontal scroll.
8. Stacking Context
Isolate your app's z-index
#root,
#__next {
isolation: isolate;
}Why? Creates a new stacking context so your z-index values don't interfere with third-party widgets.
How to Use
Option 1: Create a reset.css file
Save the reset as reset.css and import it at the top of your main CSS file.
@import 'reset.css';Option 2: Paste at the top of your CSS
Copy the reset directly into the beginning of your main stylesheet. Make sure it comes before your custom styles.
Option 3: Use with Tailwind CSS
Tailwind includes its own reset (Preflight). You don't need this reset if you're using Tailwind unless you want to replace Preflight.
Browser Support
This reset uses modern CSS features supported by all current browsers:
Note: 100svh requires Safari 15.4+. For older browser support, use 100vh instead.
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes