CSS offset-anchor Property

Definition and Usage

The offset-anchor property picks which point inside an element sits on an offset-path. Only that point rides the path; the rest of the box hangs around it.

The initial value is auto, which usually matches transform-origin. If there is no path, auto follows offset-position instead. It is not inherited. You can also set it in the offset shorthand after a slash.

CSS Syntax

A position uses the same grammar as background-position: keywords, percentages, lengths, or an edge offset.

Property Values

How to Use offset-anchor

Give the element a path, park it on that path, then choose which point of the box touches the line.

1. Set an offset-path on the element.
2. Set offset-distance (or animate it) so the element is on the path.
3. Set offset-anchor to auto, a keyword pair, or a percentage. It is not inherited.
4. Keep offset-rotate: 0deg while learning so rotation does not hide the anchor change.

Live Preview

The gray line is the path. The blue box stays at 50% distance. Change offset-anchor and watch which point sits on the line.

CSS Examples

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

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

<div></div>

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

<div></div>

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

<div></div>

Key Takeaways