CSS paint-order Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The paint-order CSS property is used to specify the order in which different paint operations should be applied to an element. In modern web development, elements can be rendered using multiple techniques, such as 'fill' for solid colors, 'stroke' for outlines, and 'markers' for points on a path. By using paint-order, developers can control the sequence in which these paint operations are applied, affecting the rendering outcome. This property is particularly useful for fine-tuning the appearance of complex graphics and ensuring that certain visual effects are prioritized over others, enhancing the overall presentation of web content.

Initial value: normal
Applies to: text elements
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.paintOrder

Syntax

paint-order: normal | [ fill || stroke || markers ]

Values

normalPaint the different items in normal paint order.
stroke, fill, markersSpecify some or all of these values in the order you want them to be painted in.

Example

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

  <text x="10" y="75">stroke in front</text>

  <text x="10" y="150" class="stroke-behind">stroke behind</text>

</svg>

CSS

text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}

Result

Editor