CSS offset-path Property

Definition and Usage

The offset-path property defines the route an element follows. That route can be a custom SVG-style path(), a basic shape such as circle(), or none.

Pair it with offset-distance to place or animate the element along the path. offset-rotate and offset-anchor control facing and which point sticks to the path. The initial value is none. It is not inherited, and it creates a stacking context.

CSS Syntax

Property Values

How to Use offset-path

Pick a path shape, then move along it with distance.

1. Choose a path value such as path() or circle().
2. Set offset-path on the moving element. It is not inherited.
3. Set or animate offset-distance from 0% to 100%.
4. Add rotate or anchor only when you need facing or a different contact point.

Live Preview

The marker travels the selected path. Change offset-path and watch the route change.

CSS Examples

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

<style>
  @keyframes travel {
    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>
  @keyframes orbit {
    to { offset-distance: 100%; }
  }
  div {
    width: 24px;
    height: 24px;
    background: #2563eb;
    offset-path: circle(50px at 140px 80px);
    offset-rotate: auto;
    animation: orbit 5s linear infinite;
  }
</style>

<div></div>

<style>
  @keyframes lap {
    to { offset-distance: 100%; }
  }
  div {
    width: 24px;
    height: 24px;
    background: #2563eb;
    offset-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
    offset-rotate: 0deg;
    animation: lap 5s linear infinite;
  }
</style>

<div></div>

Key Takeaways