inset

The inset property in CSS is a modern shorthand property used to control the position of absolutely positioned or fixed elements.

It is a shortcut for:

[code theme="dark"] top right bottom left [/code]

Instead of writing:

[code theme="dark"] top:0; right:0; bottom:0; left:0; [/code]

you can simply write:

[code theme="dark"] inset:0; [/code]

Basic Syntax

[code theme="dark"] inset:value; [/code]

Simple Example

[code theme="dark"] .box{ position:absolute; inset:0; } [/code]

This makes the element stretch to all four sides of its parent.

Equivalent Traditional CSS

[code theme="dark"] .box{ position:absolute; top:0; right:0; bottom:0; left:0; } [/code]

How inset Works

The inset property only works when the element has:

• position:absolute
• position:fixed
• position:relative (in some offset cases)
• position:sticky

Without positioning, inset will not have any visible effect.

Using Single Value

[code theme="dark"] inset:20px; [/code]

Equivalent to:

[code theme="dark"] top:20px; right:20px; bottom:20px; left:20px; [/code]

Using Two Values

[code theme="dark"] inset:10px 30px; [/code]

Meaning:

• Top & Bottom → 10px
• Left & Right → 30px

Using Three Values

[code theme="dark"] inset:10px 20px 40px; [/code]

Meaning:

• Top → 10px
• Left & Right → 20px
• Bottom → 40px

Using Four Values

[code theme="dark"] inset:10px 20px 30px 40px; [/code]

Equivalent to:

[code theme="dark"] top:10px; right:20px; bottom:30px; left:40px; [/code]

Fullscreen Overlay Example

[code theme="dark"] .overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); } [/code]

Very commonly used for:

• Modals
• Popups
• Fullscreen overlays
• Loading screens
• Side menus

Centered Box Example

[code theme="dark"] .box{ position:absolute; inset:0; margin:auto; width:200px; height:200px; } [/code] [preview data="eyJodG1sIjoiPGRpdiBjbGFzcz1cInJlbGF0aXZlIHctMTAwIGgtNDggYmctZ3JheS0yMDAgcm91bmRlZC1sZyBvdmVyZmxvdy1oaWRkZW5cIj5cbiAgXG4gIDwhLS0gQmFja2dyb3VuZCBJbWFnZSAtLT5cbiAgPGltZyBcbiAgICBzcmM9XCJodHRwczovL2ltYWdlcy51bnNwbGFzaC5jb20vcGhvdG8tMTUwNjc0NDAzODEzNi00NjI3MzgzNGIzZmJcIiBcbiAgICBhbHQ9XCJOYXR1cmVcIlxuICAgIGNsYXNzPVwidy1mdWxsIGgtZnVsbCBvYmplY3QtY292ZXJcIlxuICAvPlxuXG4gIDwhLS0gT3ZlcmxheSB1c2luZyBpbnNldC0wIC0tPlxuICA8ZGl2IGNsYXNzPVwiYWJzb2x1dGUgaW5zZXQtMCBiZy1ibGFjay81MCBmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlclwiPlxuICAgIDxoMiBjbGFzcz1cInRleHQtd2hpdGUgdGV4dC0yeGwgZm9udC1ib2xkXCI+XG4gICAgICBPdmVybGF5IENvbnRlbnRcbiAgICA8L2gyPlxuICA8L2Rpdj5cblxuPC9kaXY+IiwiY3NzIjoiLm15LWJ0biB7XG4gIHBhZGRpbmc6IDEwcHggMjBweDtcbiAgYmFja2dyb3VuZDogIzEwYjk4MTtcbiAgY29sb3I6IHdoaXRlO1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xufSIsImpzIjoiZG9jdW1lbnQucXVlcnlTZWxlY3RvcihcIi5teS1idG5cIikuYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsICgpID0+IHtcbiAgYWxlcnQoXCJIZWxsbyBmcm9tIExpdmUgUHJldmlldyFcIik7XG59KTsifQ=="]

This centers the box inside the parent container.

[grid] Fullscreen Overlay Example Modal Using inset:0 Centered Absolute Box Modern CSS Positioning Demo [/grid]

Logical Variants

CSS also provides logical inset properties:

• inset-inline
• inset-block
• inset-inline-start
• inset-inline-end
• inset-block-start
• inset-block-end

These help create RTL-friendly layouts.

inset-inline Example

[code theme="dark"] .box{ position:absolute; inset-inline:20px; } [/code]

Equivalent to:

[code theme="dark"] left:20px; right:20px; [/code]

Why Developers Use inset

• Cleaner code
• Less repetition
• Modern shorthand syntax
• Easy fullscreen positioning
• Better readability

Common Use Cases

• Fullscreen overlays
• Absolute positioning
• Fixed navigation panels
• Image overlays
• Modal popups
• Video layers
• Stretching elements inside containers

Advantages

• Very short syntax
• Easy to understand
• Reduces CSS repetition
• Great for modern layouts
• Works well with responsive designs

Disadvantages

• Requires positioned elements
• Older developers may prefer traditional properties
• Very old browsers may lack support

Cross Browser Compatibility

• Chrome → Supported
• Edge → Supported
• Firefox → Supported
• Safari → Supported
• Mobile Browsers → Good Support

Modern browsers support the inset property very well.

For older browser compatibility, developers may still use:

[code theme="dark"] top right bottom left [/code]

as fallback properties if required.

Browser Support Summary

[code theme="dark"] inset:0; [/code]

is now considered a stable and recommended modern CSS feature for positioning and layout control.