CSS `all` Property

Reset or inherit all CSS properties in a single declaration!

What is the `all` Property?

The CSS all property is a powerful shorthand that lets you reset or inherit all CSS properties (except unicode-bidi and direction) at once. It's especially useful for resetting styles in components, modals, or third-party widgets.

Reset Everything: Use all: unset; to remove all inherited and user-agent styles from an element.
Inherit Everything: Use all: inherit; to make an element inherit all properties from its parent.
Revert Everything: Use all: revert; to revert all properties to their default UA or user styles.
Not for Animatable Properties: all cannot be transitioned or animated.

Syntax

selector {
  all: unset | initial | inherit | revert | revert-layer;
}

💡 Tip: all: unset; is great for creating "unstyled" buttons or links that ignore all browser and inherited styles!

Browser Support: The all property is supported in all modern browsers.

Interactive Examples

Reset Button Styles

.reset-btn {
  background: #4f8cff;
  color: #fff;
  border: none;
  border-radius: 0.4rem;
  padding: 0.7rem 1.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  margin-right: 0.7rem;
}
.all-unset {
  all: unset;
  background: #ffe4e6;
  color: #be185d;
  border-radius: 0.4rem;
  padding: 0.7rem 1.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  border: 2px dashed #be185d;
}

Inherit All Properties

Default Child All: Inherit

.inherit-demo-parent {
  color: #7c3aed;
  font-size: 1.3rem;
  font-weight: bold;
}
.inherit-demo-child {
  color: #222;
  font-size: 1rem;
  font-weight: normal;
  margin-right: 1.2rem;
}
.all-inherit {
  all: inherit;
}

Revert All Properties

Styled Child All: Revert

.revert-demo {
  color: #be185d;
  font-size: 1.2rem;
  font-style: italic;
}
.revert-child {
  color: #4f8cff;
  font-size: 1.5rem;
  font-style: normal;
  margin-right: 1.2rem;
}
.all-revert {
  all: revert;
}

Try it: Compare the buttons and text above to see how all can reset, inherit, or revert all CSS properties at once!