CSS offset Property


The offset CSS property is a shorthand property that sets all the properties required for animating an element along a defined path. To use the offset property, you first need to define the path that the element will follow. This can be done using the path() CSS function. Once you have defined the path, you can use the offset property to specify the element's initial position on the path, the distance it will travel, and whether or not it should rotate. Individual properties are: offset-anchor, offset-distance, offset-path, offset-position and offset-rotate

Initial value
See individual properties
Applies to
transformable elements
Computed value
See individual properties
See individual properties
JavaScript syntax

Interactive Demo


offset: [ <offset-position>? [ <offset-path> [ <offset-distance> || <offset-rotate> ]? ]? ]! [ / <offset-anchor> ]?  


  • <offset-position>Specifies the initial position of an element along a path.
  • <offset-path>Specifies the path an element is animated along.
  • <offset-distance>Specifies the distance from the start of the path defined by offset-path.
  • <offset-rotate>Specifies rotation of an element as it is animated along a path
  • <offset-anchor>Specifies the point on an element that is fixed to the path it is animated along.


<div id="offsetElement"></div>
@keyframes move {
  from {
    offset-distance: 0%;

  to {
    offset-distance: 100%;

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;

Browser Support

The following table will show you the current browser support for the CSS offset property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 3rd January 2024