1. css
  2. /properties
  3. /offset-path

offset-path

Definition

offset-path is a CSS property that defines a path along which an element should be positioned when using the offset property in combination with other offset properties like offset-anchor, offset-distance, or offset-position. The path can be defined using SVG path data or the path() function.

Examples

In this example, the offset-path property is set to a circular path with a radius of 50% of the element's containing block, centered at 50% of the x-axis and 50% of the y-axis:

.element {
  position: absolute;
  offset: 20px;
  offset-path: circle(50% at 50% 50%);
}

In this example, the offset-path property is set to a quadratic Bezier curve using SVG path data:

.element {
  position: absolute;
  offset: 20px;
  offset-path: path('M 100 200 Q 200 100 300 200');
}

In this example, the offset-path property is set to a quadratic Bezier curve using the path() function:

.element {
  position: absolute;
  offset: 20px;
  offset-path: path('M 100 200 Q 200 100 300 200');
}

Values

ValueDescription
<url>Sets the path using an SVG file.
noneNo path is applied.
path()Sets the path using a path() function.

Best Practices

  • Use offset-path in conjunction with other offset properties to position an element along a custom path.
  • Be mindful of the path's shape and how it will affect the element's position.
  • Avoid using offset-path with paths that have sharp corners or abrupt changes in direction, as it can cause the element to jump or jitter.
  • Test your designs on different devices and screen sizes to ensure that the element is positioned correctly.
  • Be mindful of performance when using offset-path, as it can cause layout and rendering issues on complex or animated elements.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes