CSS offset-distance Property

Definition and Usage

The offset-distance property sets how far an element sits along an offset-path. 0% is the start of the path. 100% is the end.

The initial value is 0. Percentages refer to the total path length. Animate distance from 0% to 100% to travel the path. It is not inherited, and it is part of the offset shorthand.

CSS Syntax

Property Values

How to Use offset-distance

Define a path first, then set or animate how far along that path the element sits.

1. Set an offset-path on the element.
2. Set offset-distance to a percentage or length. It is not inherited.
3. For motion, animate distance from 0% to 100% with @keyframes.
4. Optionally add offset-rotate or offset-anchor.

Live Preview

A marker sits on a straight path. Change offset-distance to move it from start to end.

CSS Examples

Each snippet adds only what offset-distance needs: a path and a distance. Use Try It Yourself for a live editor.

<style>
  div {
    width: 24px;
    height: 24px;
    background: #2563eb;
    offset-path: path("M 20 80 L 280 80");
    offset-distance: 50%;
    offset-rotate: 0deg;
  }
</style>

<div></div>

<style>
  @keyframes travel {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
  }
  div {
    width: 24px;
    height: 24px;
    background: #2563eb;
    offset-path: path("M 20 80 L 280 80");
    offset-rotate: 0deg;
    animation: travel 4s linear infinite;
  }
</style>

<div></div>

<style>
  div {
    width: 24px;
    height: 24px;
    background: #2563eb;
    offset-path: path("M 20 80 L 280 80");
    offset-distance: 80px;
    offset-rotate: 0deg;
  }
</style>

<div></div>

Key Takeaways