CSS offset-path Property

The offset-path CSS property is used to specify a movement path for an element to follow and defines the element's position.

The position on the path is determined by the offset-distance property.

In the earlier versions of the specification, the name of offset-path was ''motion-path''. However, it was changed to offset-path as the property specifies static positions.

The offset-path property is not animated, it just defines the path for animation.
This offset property is an experimental technology.

If you have defined offset-path in CSS, you can use JavaScript to control the animation.

Initial Value none
Applies to Transformable elements.
Inherited No.
Animatable Yes.
Version Motion Path Module Level 1
DOM Syntax object.style.offsetPath = "ray()";

Syntax

offset-path: none | ray() | path() | <url> | <basic-shape>;

Example of the offset-path property with the offset-rotate and animation properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 30%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 3s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-path property example</h2>
      <div class="mover"></div>
    </body>
</html>

Example of the offset-path property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #666;
      }
      .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 100 50 h 150 v 150');
      }
      #box1 {
        background-color: #8ebf42;
        offset-distance: -280%;
      }
      #box2 {
        background-color: #1c87c9;
        offset-distance: 190%;
      }
    </style>
    <body>
      <div class="item" id="box1"></div>
      <div class="item" id="box2"></div>
    </body>
</html>

Values

Value Description
none No motion path is specified. This is the default value of this property.
ray() A line segment which starts from the position of the box and proceeds in the direction defined by the specified angle.
url() References the ID of an SVG element to be used as a movement path.
<basic-shape> Specifies a shape which includes: circle(), ellipse(), inset(), polygon(), or path().
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
55.0+ 63.0+ 45.0+

Practice Your Knowledge

What does the CSS offset-path property do?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?