CSS fill-opacity Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The fill-opacity property controls the transparency of the fill painting applied to SVG shapes and text. It adjusts only the alpha channel of the element’s fill, so it directly affects how much of the underlying content shows through the fill area while leaving geometric attributes (like shape, stroke width, or position) unchanged. When you set fill-opacity, you are modulating the fill paint itself rather than the element as a whole, which makes it useful for creating layered visual effects where the interior of a shape should be translucent but other aspects remain fully visible. The effective color used for filling is the computed fill color combined with this opacity value; see the fill property for how the fill paint is determined.

Because fill-opacity only affects the fill’s alpha, it composes multiplicatively with other transparency sources. For example, the element’s overall opacity multiplies with the fill’s computed alpha to produce the final pixel transparency, and stroke transparency is controlled independently via stroke-opacity. In practice this means you can fade just the interior of a shape (using fill-opacity) while leaving its outline fully opaque, or vice versa, without changing color values themselves.

Painting order can change visual results when transparency is involved. Whether the fill is drawn before or after the stroke (or other paint operations) affects how overlapping transparent regions blend; that is governed by the paint-order property. Note that fill-opacity affects only rendering: it does not alter layout, geometry, or the element’s ability to receive events. Transparent pixels produced by fill-opacity are still part of the painted region unless pointer-event handling is changed separately.

In practical use, fill-opacity is a straightforward tool for layering, subtle shading, overlays, and hover or focus visuals that target just the fill. It’s commonly animated or transitioned when you want the interior to fade in or out while preserving stroke or child-element appearance; if you instead animate the entire element’s transparency, use the overall opacity property to affect the element and its descendants together.

Definition

Initial value: 1
Applies to: SVG shapes and text content elements
Inherited: yes
Computed value: The same as the specified value after clipping the <number> to the range [0.0, 1.0].
Animatable: by computed value type
JavaScript syntax: object.style.fillOpacity

Syntax

fill-opacity: <number>;

Values

<number>
A number between 0 and 1 (inclusive) representing the opacity level.
- 0 → fully transparent
- 1 → fully opaque
- 0.5 → 50% opacity (semi-transparent)

Example

HTML

<body>

  <h1>SVG fill-opacity example</h1>

  <svg width="400" height="120" viewBox="0 0 400 120" aria-hidden="true">

    <rect class="fill-opaque" x="10" y="10" width="110" height="100" rx="8" />

    <rect class="fill-semi" x="145" y="10" width="110" height="100" rx="8" />

    <rect class="fill-transparent" x="280" y="10" width="110" height="100" rx="8" />

  </svg>

  <p class="caption">Left: fill-opacity: 1; Middle: fill-opacity: 0.6; Right: fill-opacity: 0.2</p>

</body>

CSS

/* Page layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: #f7f8fa;
  color: #111827;
}

/* SVG container appearance */
svg {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}

/* Common rectangle styles */
rect {
  stroke: #0f172a;
  stroke-width: 2;
  fill: #2563eb; /* base fill color */
  transition: fill-opacity 0.2s ease;
}

/* Different fill-opacity values */
.fill-opaque {
  fill-opacity: 1; /* fully opaque */
}

.fill-semi {
  fill-opacity: 0.6; /* semi-transparent */
}

.fill-transparent {
  fill-opacity: 0.2; /* mostly transparent */
}

/* Hover to demonstrate interaction */
rect:hover {
  fill-opacity: 0.85;
  cursor: pointer;
}

.caption {
  font-size: 14px;
  color: #374151;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS fill-opacity property. Hover over a browser icon to see the version that first introduced support for this CSS property.