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
/* 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
and1
, inclusive. <percentage>
-
A percentage value between
0%
and100%
, 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>
.
<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 > * {
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
See also
- SVG
fill-opacity
attribute - Presentation properties:
fill-opacity
,clip-rule
,color-interpolation-filters
,fill-rule
,fill
,marker-end
,marker-mid
,marker-start
,shape-rendering
,stop-color
,stop-opacity
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,text-anchor
, andvector-effect
opacity
background-color
<color>
<basic-shape>
data type