CSS inset Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The inset property provides a concise way to express how an element should be offset from the edges of its containing block. Conceptually it acts as a single declaration that controls the element’s offsets on each side instead of setting each edge individually; it is equivalent in intent to using top, right, bottom and left separately, but written in a compact form. Authors use it when they want to position an element relative to its container with fewer lines of CSS while keeping the offsets for all four sides clearly related.

The property only affects elements that participate in positioning; it has no effect on elements in the normal static flow unless their positioning context is changed via position. Unlike box model properties such as margin and padding, which influence layout and the size of the box, inset moves a positioned box relative to its containing block without directly altering its content box dimensions. Because it defines offsets, it interacts with stacking and painting order and is often combined with transforms or composited properties such as transform when building animations or UI transitions.

For internationalized and writing-mode–aware layouts, there are logical counterparts that map the block and inline axes to the physical edges: inset-block and inset-inline. These logical forms are useful when you want an element’s offsets to automatically adapt to different writing directions or vertical text flows without manually switching the physical edge properties.

In practice, inset is handy for implementing overlays, anchored controls, and small UI components that need consistent offsets from their container. Keep in mind that offsets defined by this property are resolved against the containing block and may interact with clipping, overflow, and stacking contexts; for high-performance motion, prefer animating composited properties and be mindful of how offsetting positioned elements affects surrounding layout and hit testing.

Definition

Initial value: See individual properties
Applies to: positioned elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.inset

Interactive Demo

I am absolutely positioned.

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

inset: <'top'>{1,4}

Values

<'top'>{1,4}Sets the top, right, bottom, and left properties. Values are assigned to its sub-properties as for margin.

Example

HTML

  <div class="demo">

    <h2>Inset  -  shorthand</h2>

    <div class="frame">

      <div class="box box-shorthand">inset: 24px 40px;</div>

    </div>

  </div>



  <div class="demo">

    <h2>Inset  -  longhand</h2>

    <div class="frame">

      <div class="box box-longhand">top: 16px; right: 24px; bottom: 16px; left: 48px;</div>

    </div>

  </div>



  <div class="demo">

    <h2>Inset  -  block & inline</h2>

    <div class="frame">

      <div class="box box-inline">inset-block: 20px 20px; inset-inline: 40px;</div>

    </div>

  </div>

CSS

/* Simple demo of the CSS inset property (shorthand, longhand, block/inline) */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f3f4f6;
  color: #0f172a;
  padding: 28px;
}

.demo {
  max-width: 720px;
  margin: 18px auto;
}

h2 {
  font-size: 16px;
  margin: 0 0 10px;
  color: #0f172a;
  font-weight: 600;
}

.frame {
  position: relative;
  height: 140px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(2, 6, 23, 0.03);
}

.box {
  position: absolute; /* inset only works on positioned elements */
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Shorthand: top/bottom = 24px, left/right = 40px */
.box-shorthand {
  inset: 24px 40px;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
}

/* Longhand: equivalent to setting top/right/bottom/left individually */
.box-longhand {
  top: 16px;
  right: 24px;
  bottom: 16px;
  left: 48px;
  background: linear-gradient(135deg, #ef4444, #f97316);
}

/* inset-block and inset-inline control block (top/bottom) and inline (left/right) axes */
.box-inline {
  inset-block: 20px 20px;   /* top:20px; bottom:20px */
  inset-inline: 40px;       /* left:40px; right:40px */
  background: linear-gradient(135deg, #10b981, #06b6d4);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS inset property. Hover over a browser icon to see the version that first introduced support for this CSS property.