It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Offset Property

Reading time 1 min
Published Aug 8, 2017
Updated Oct 15, 2019

CSS offset property

The CSS offset property allows you animate an element by defining a specific path. It is an experimental property, so always check the browser support info.

CSS offset is a shorthand for five subproperties:

  • offset-anchor
  • offset-distance
  • offset-path
  • offset-position
  • offset-rotate

All of them can also be used individually. However, the subproperties are experimental as well.

Syntax and property values

As all shorthands in CSS, offset requires you to list the values for each subproperty in a row:

offset: path distance rotate anchor;

The subproperties and their values are explained in the table below.

Subproperty Default value Definition
offset-anchor auto Defines the point traveling along the path in keywords, length units, percentages or edge offset values
offset-distance 0 Defines the element's position in the path in percentages
offset-path none Defines the motion path in SVG coordinates
offset‑position auto The initial position of the element
offset-rotate auto Defines the element's orientation in the path in angles

Note: in its early versions, the offset CSS property was also called motion.

Browser support

Browser image
Chrome
55+
Browser image
Edge
-
Browser image
Firefox
-
Browser image
IE
-
Browser image
Opera
42+
Browser image
Safari
-

Mobile browser support

Browser image
Chrome
55+
Browser image
Firefox
-
Browser image
Opera
-
Browser image
Safari
-