CSS inset Shorthand Generator

Replace top / right / bottom / left with the modern inset shorthand. Live preview included.

Settings

Position

Presets

Top

Right

Bottom

Left

inset shorthand follows the same pattern as margin/padding:
inset: top right bottom left;
inset: top-bottom left-right; (2 values)
inset: all; (1 value)

Live Preview

element

The purple box is positioned within the dashed container. Adjust the inset values to move it.