fill-opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

The fill-opacity CSS property defines the opacity of the painting operation (color, gradient, pattern, etc.) applied to SVG shapes or text content elements to fill the element. The property defines the opacity of the element's fill only; it does not affect the stroke. If present, it overrides the element's fill-opacity attribute.

Note: The fill-opacity property only applies to <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, and <tspan> elements nested in an <svg>. It doesn't apply to other SVG, HTML, or pseudo-elements.

Syntax

css

/* numeric and percentage values */
fill-opacity: 0.2;
fill-opacity: 20%;

/* Global values */
fill-opacity: inherit;
fill-opacity: initial;
fill-opacity: revert;
fill-opacity: revert-layer;
fill-opacity: unset;

Values

The <number> and <percentage> values denote the opacity of the fill of the element.

<number>: A numeric value between 0 and 1, inclusive.
<percentage>: A percentage value between 0% and 100%, inclusive.

With 0 or 0%, the element is fully transparent. With 1 or 100%, the element is fully opaque. With values in between, the element is semi-transparent, with content behind the element being visible.

Formal definition

Initial value	`1`
Applies to	SVG shapes and text content elements
Inherited	yes
Percentages	map to the range `[0,1]`
Computed value	The same as the specified value after clipping the `<number>` to the range [0.0, 1.0].
Animation type	by computed value type

Formal syntax

fill-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

Examples

Defining the fill opacity of SVG elements

This example demonstrates the basic use case of fill-opacity, and how the CSS fill-opacity property takes precedence over the fill-opacity attribute and has no effect on any stroke applied to a shape.

HTML

We include several different SVG graphic elements and set the fill-opacity attribute of each one to 1 (except line), meaning the fill of each element is opaque. The fill-opacity SVG attribute does not apply to <line>.

html

<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill-opacity="1" />
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" fill-opacity="1" />
  <circle cx="25" cy="75" r="20" fill-opacity="1" />
  <ellipse cx="75" cy="75" rx="20" ry="10" fill-opacity="1" />
  <line x1="50" x2="90" y1="40" y2="60" stroke="black" stroke-width="5" />
  <polyline
    points="60 90 65 100 70 95 75 110 80 105 85 120 90 115 95 130 100 125"
    fill-opacity="1" />
  <path d="M20,130 Q40,105 50,130 T90,130" fill-opacity="1" />
</svg>

CSS

With CSS, we use the fill-opacity property to override the value of the SVG fill-opacity attribute, giving each SVG element a different value.

We add a stroke to the circle and ellipse, to demonstrate that the opacity of the stroke is not impacted by the fill-opacity property.

Other SVG styles are set, including a background image to allow the opacity of each element to be more easily seen. These are not shown for the sake of brevity.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  background: repeating-linear-gradient(
    to bottom right,
    transparent 0 10px,
    #ccc 10px 11px
  );
}

css

svg > * {
  fill: black;
}
rect:last-of-type {
  fill-opacity: 0.1;
}
circle {
  fill-opacity: 0.6;
}
ellipse {
  fill-opacity: 40%;
}
line {
  fill-opacity: 10%;
}
polyline {
  fill-opacity: 50%;
}
path {
  fill-opacity: 0.5;
}

circle,
ellipse {
  stroke: black;
  stroke-width: 3px;
}

Results

Only two elements are fully opaque: the first rectangle and the line. The first rectangle is not matched by any of the selectors, therefore no CSS is applied and the fill is fully opaque. The line is matched, with fill-opacity: 10% set. However, the line has no fill paint operation — only the stroke is visible — therefore the declaration has no effect.

Specifications

Specification
CSS Fill and Stroke Module Level 3 # fill-opacity

Browser compatibility

BCD tables only load in the browser