No Login Data Private Local Save

CSS inset Property Demo - Online Shorthand for Top/Right/Bottom/Left

22
0
0
0

CSS inset Property Demo

Interactive visual tool for the CSS inset shorthand — set top, right, bottom, and left in one declaration.

Live Preview
inset: 30px 50px 40px 20px
Drag the blue element to reposition • Colored bands show inset distances
Direction Controls
px
px
px
px
Quick Presets
/* Expanded form */
top: 30px;
right: 50px;
bottom: 40px;
left: 20px;

/* Shorthand (recommended) */
inset: 30px 50px 40px 20px;
Frequently Asked Questions
What is the CSS inset property?

inset is a CSS shorthand property that sets top, right, bottom, and left all at once. It works with positioned elements (those with position: absolute, fixed, relative, or sticky). It follows the same shorthand pattern as margin and padding.

Browser Support Chrome 87+, Firefox 66+, Safari 14.1+, Edge 87+

How does the inset shorthand syntax work?

Same as margin/padding:

  • 1 value: all 4 sides — inset: 10px
  • 2 values: top/bottom, left/right — inset: 10px 20px
  • 3 values: top, left/right, bottom — inset: 10px 20px 30px
  • 4 values: top, right, bottom, left (clockwise) — inset: 10px 20px 30px 40px
Can I use auto with inset?

Yes! auto is the initial value. You can mix auto with length values. For example, inset: auto 20px 30px auto lets the top and left be determined by the element's natural position while pinning the right and bottom edges. This is useful for flexible layouts.

What units can I use with inset?

All standard CSS length units: px, %, em, rem, vw, vh, vmin, vmax, ch, and more. Percentages are relative to the containing block's dimensions (width for left/right, height for top/bottom). Negative values are also allowed — they pull the element outside its containing block.

inset vs writing top/right/bottom/left separately?

Using inset reduces code by up to 75%. It's cleaner, easier to maintain, and improves readability. A single inset: 20px 40px replaces four separate declarations. It also pairs beautifully with CSS logical properties for internationalization.

Does inset work with CSS Grid or Flexbox?

inset only affects positioned elements. It does not directly affect grid or flex items unless those items are also positioned (e.g., position: absolute within a grid container). For non-positioned elements, use margin, padding, or grid/flex alignment properties instead.

🔧 Related Tools