fill-opacity
An SVG property that controls the transparency of the inner fill of a shape or text. A value of 0 is fully transparent, and 1 is fully opaque.
Quick example
rect {
/* Makes the inner fill 50% transparent */
fill-opacity: 0.5;
}Quick facts
Initial value
1Inherited
Yes
Applies to
a subset of SVG elements (shapes and text)
Animation type
byComputedValueType
Values
opacity fill-opacity Browser Support
Widely available 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since .
Safe to use without fallbacks.
1+
1+
4+
15+