inset

A shorthand that sets top, right, bottom, and left in a single declaration.

Initial value: auto
Inherited: No
Animatable: yes, as a length or percentage
Applies to: positioned elements (position other than static)
JavaScript: element.style.inset = "0"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.cover {
  position: relative;
}

.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

Preview

Definition and usage

The inset property is a shorthand for the four offset properties: top, right, bottom, and left. It works like margin or padding: one value sets every side, two values set the vertical and horizontal sides separately, and four values set the top, right, bottom, and left in turn.

The most common use is inset: 0 on an element with position: absolute. The element then stretches to fill its entire parent, which is handy for overlays, backgrounds, and image dimming.

Like the individual offsets, inset only works on elements whose position is something other than static.

Syntax

inset: <top> <right>? <bottom>? <left>?;

Values

0
The element stretches to cover the entire reference point.
16px
An equal 16px gap on every side.
20px 40px
The first value is top and bottom, the second is left and right.
auto auto 12px 12px
Four values: the element sticks to the bottom-left corner.

Value	Description
0	The element stretches to cover the entire reference point.
16px	An equal 16px gap on every side.
20px 40px	The first value is top and bottom, the second is left and right.
auto auto 12px 12px	Four values: the element sticks to the bottom-left corner.

Values in practice

The element stretches to cover the entire reference point.

.demo { inset: 0; }

16px

An equal 16px gap on every side.

.demo { inset: 16px; }

20px 40px

The first value is top and bottom, the second is left and right.

.demo { inset: 20px 40px; }

auto auto 12px 12px

Four values: the element sticks to the bottom-left corner.

.demo { inset: auto auto 12px 12px; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

inset: 0 together with margin: auto and a known size is a simple way to center an absolutely positioned element.
For full-screen modal windows, combine position: fixed with inset: 0.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course