W3docs
en
Log in

CSS offset-anchor property

Use the offset-anchor CSS property for specifying the anchor point within the box. Read about property values and practice with examples.

The offset-anchor property defines the anchor point of a box along the offset path. An offset path is considered to be either a geometry of a basic shape that hasn’t been styled or a path consisting of one or more sub-paths. The anchor point specifies the point of the box which is the point that is moved along the offset path.

Warning

This offset property is an experimental technology.

Initial Valueauto
Applies toTransformable elements.
InheritedNo.
AnimatableYes.
VersionMotion Path Module Level 1
DOM Syntaxobject.style.offsetAnchor = "right top";

Syntax

CSS offset-anchor syntax

offset-anchor: auto | <position>;

Example of the offset-anchor property:

CSS offset-anchor code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
        padding: 0 50px;
        width: 100%;
      }
      svg,
      .box {
        position: absolute;
      }
      .box {
        animation: move 3s 0ms infinite alternate ease-in-out;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        height: 50px;
        width: 50px;
        offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
        offset-anchor: center;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-anchor property example</h2>
    <svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
      <path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
    </svg>
    <div class="box"></div>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
autoThe center of the box.
<position><percentage> - A percentage for the horizontal offset is relative to the width of the padding box. A percentage for the vertical offset is relative to the height of the padding box. <length> - A length value gives a length offset from the upper left corner of the padding box of a box.
initialMakes the property use its default value.
inheritInherits the property from its parent element.

Practice

Practice

What is the functionality of the offset-anchor property in CSS according to the w3docs.com article?