Reset Options
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
Box Sizing Border-BoxRemove MarginsRemove PaddingReset Font SizeInherit Line HeightRemove List StylesBlock Display for ImagesCollapse Table BordersReset Button StylesInherit Input FontsSmooth ScrollingReduce Motion Support
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;
}
}