← Back to release summary

Percentage opacity

Category

CSS

Type

New or changed feature

Status

Enabled by default (Chrome 78)

Intent stage

Evaluate readiness to ship

Summary

Adds support for percentage values to the opacity properties, specifically, opacity, stop-opacity, fill-opacity, stroke-opacity, and shape-image-threshold. For example, opacity: 50%; is equivalent to opacity: 0.5; https://drafts.csswg.org/css-color/#transparency

Motivation

This brings consistency and spec compliance. The rgba() function already accepts percentage alpha value, for example rgba(0, 255, 0, 50%).

Standards & signals

• Specification: https://www.w3.org/TR/css-color-4/#transparency
• Firefox: Shipped/Shipping — Reasonable.
• Safari: Positive — We're happy to adopt. % opacity is good in every context
• Web developers: No signals
• Tracking bug: https://crbug.com/907787

Docs: https://www.w3.org/TR/css-color-4/#transparency https://www.w3.org/TR/css-color-4/#typedef-alpha-value

Explainers: N/A

View on chromestatus.com