CSS offset-distance Property


The offset-distance CSS property specifies a position along an offset-path for an element to be placed. It is used in conjunction with the offset-path property, which defines the path that the element will follow. The offset-distance property can be specified as a percentage of the total length of the path, or as an absolute length. A value of 0% places the element at the start of the path, while a value of 100% places the element at the end of the path. Negative values are also allowed, and will place the element before the start of the path. The offset-distance property can be used to create animations, or to simply position an element along a path. For example, you could use it to create a car animation that follows a road, or to position a product image along a curved line.

Initial value
Applies to
transformable elements
Computed value
for <length> the absolute value, otherwise a percentage
a length, percentage or calc();
JavaScript syntax

Interactive Demo


offset-distance: <length-percentage>


  • <length-percentage>A length that specifies how far the element is along the path (defined with offset-path). 100% represents the total length of the path (when the offset-path is defined as a basic shape or path()).


<div id="motion-demo"></div>
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;

@keyframes move {
  0% {
    offset-distance: 0%;
  100% {
    offset-distance: 100%;

Browser Support

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

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

Last updated by CSSPortal on: 3rd January 2024