CSS Motion Path Generator - Online offset‑path & offset‑distance

CSS offset-path is a property that defines a movement path for an element. Combined with offset-distance and offset-rotate, it allows elements to move along any custom path — circles, ellipses, bezier curves, or even complex SVG paths — creating sophisticated motion animations without complex keyframes.

As of 2025, offset-path is supported in all modern browsers: Chrome 55+, Firefox 72+, Safari 16+, and Edge 79+. The ray() function has slightly less support. For production, always test across target browsers and consider using @supports for progressive enhancement.

Traditional keyframe animations define positions at specific percentages. offset-path lets you define a geometric path once, then animate offset-distance from 0% to 100%. This is far more intuitive for curved, circular, or complex motions. You can also combine offset-rotate: auto to make elements automatically face the direction of travel.

offset-rotate: auto automatically rotates the element to align with the tangent of the path at its current position. This means a car icon following a curved road will always face forward along the curve. You can also use auto 45deg to add a constant offset angle on top of the automatic rotation.

Yes! Use offset-path: path('M...') with standard SVG path syntax. This gives you unlimited flexibility — you can create heart shapes, stars, spirals, or any custom trajectory. Our generator includes several preset paths to get you started, and you can edit the raw path data directly.

Motion paths excel at natural-looking curved motion. With keyframes, creating a smooth circle requires calculating multiple intermediate positions. With offset-path: circle(), you get perfect circular motion in one line. It's also hardware-accelerated in many browsers and produces cleaner, more maintainable code for path-based animations.

Absolutely! You can animate offset-distance while simultaneously animating scale, opacity, or filter properties. This allows for rich, layered animations — for example, an element could pulse in size while moving along a path, or fade in as it travels. Use comma-separated animations or multiple keyframe rules.