CSS offset Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The offset property is a shorthand that groups an element’s motion-path settings so you can control movement and orientation with a single declaration. It ties together the underlying motion subproperties that determine the path an element follows, how far along that path the element sits, and whether and how it rotates to follow the direction of travel. Conceptually, using offset lets authors express a coherent motion intent — where an object should move and how it should be oriented while moving — without repeating separate declarations for each facet of the motion.

Under the hood the shorthand maps to the motion primitives such as offset-path, offset-distance and offset-rotate, so it is a convenience for composing those related concerns. Because the motion it defines is a visual transform, it does not change the document flow or the element’s layout space: the element’s position in the normal flow remains as before, while the rendered box is painted at the transformed location. That separation mirrors how transform operations behave — visual movement and rotation without affecting surrounding layout.

Practical use of offset is common when you want to animate or transition an element along a path; it interoperates with animation systems and compositing so changes can be GPU-accelerated and smoothly interpolated. You can drive changes to the shorthand (and therefore the underlying motion) through timeline-driven techniques such as animation or property animations like transition, and you should be mindful that interpolating path and rotation values can introduce non-intuitive intermediate poses if the path geometry or rotation rules vary abruptly. Finally, remember that because offset centralizes motion behavior, it makes it easier to reason about an element’s movement in a single place — but also means changing the shorthand will alter all linked motion characteristics at once.

Definition

Initial value: See individual properties
Applies to: transformable elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.offset

Interactive Demo

offset: path(
'M 20 60 L 120 60 L 70 10 L 20 60')
0% auto 90deg;

offset: path(
'M 20 210 L 74 210 L 118 140 
 L 62 140 L 20 210')
20% auto;

Syntax

offset: [ <offset-position>? [ <offset-path> [ <offset-distance> || <offset-rotate> ]? ]? ]! [ / <offset-anchor> ]?

Values

<offset-position>Specifies the initial position of an element along a path.
<offset-path>Specifies the path an element is animated along.
<offset-distance>Specifies the distance from the start of the path defined by offset-path.
<offset-rotate>Specifies rotation of an element as it is animated along a path
<offset-anchor>Specifies the point on an element that is fixed to the path it is animated along.

Example

HTML

<div class="stage">

  <svg class="path" viewBox="0 0 200 100" aria-hidden="true" preserveAspectRatio="none">

    <path d="M10 80 C40 10 65 10 95 80 S150 150 190 80" />

  </svg>

  <div class="dot" aria-hidden="true"></div>

</div>

CSS

.stage {
  position: relative;
  width: 600px;
  height: 200px;
  margin: 40px auto;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: visible;
}

.path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.path path {
  stroke: #e0e0e0;
  stroke-width: 3;
  fill: none;
}

.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a7a, #ff3d3d);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  translate: -50% -50%;
  offset-path: path('M10 80 C40 10 65 10 95 80 S150 150 190 80');
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move 4s ease-in-out infinite alternate;
}

@keyframes move {
  to {
    offset-distance: 100%;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS offset property. Hover over a browser icon to see the version that first introduced support for this CSS property.