| CARVIEW |
Select Language
HTTP/2 301
content-length: 162
content-type: text/html
date: Tue, 14 Oct 2025 05:17:50 GMT
location: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity
server: nginx
strict-transport-security: max-age=60; includeSubDomains
via: 1.1 google
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3KWvR4X0poip3eFT-VzqRtWDsFNpoG_gUFHES53sMVgWTrlQjIL5LaedRyaORDT8nHi
cache-control: public, max-age=3600
expires: Tue, 14 Oct 2025 06:17:51 GMT
last-modified: Tue, 14 Oct 2025 01:08:26 GMT
etag: W/"a0c9fe535ec356a9462c31ba729ec6b8"
x-goog-generation: 1760404106798215
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 254985
x-goog-meta-goog-reserved-file-mtime: 1760402399
x-goog-hash: crc32c=XAKXuA==, md5=oMn+U17DVqlGLDG6cp7GuA==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: d7f1292440e8ee36dd4d2f743aebf79e
date: Tue, 14 Oct 2025 05:17:52 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
opacity() - CSS | MDN
Toggle sidebar
opacity()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
The opacity() CSS function applies transparency to the samples in the input image. Its result is a <filter-function>.
Try it
filter: opacity(1);
filter: opacity(80%);
filter: opacity(50%);
filter: opacity(0.2);
filter: opacity(0);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Note:
This function is similar to the more established opacity property. The difference is that with filters, some browsers provide hardware acceleration for better performance.
Syntax
css
opacity(amount)
Parameters
amountOptional-
The amount of the conversion, specified as a
<number>or a<percentage>. A value of0%is completely transparent, while a value of100%leaves the input unchanged. Values between0%and100%are linear multipliers on the effect. The initial value for interpolation is1. The default value is1.
Formal syntax
<opacity()> =
opacity( [ <number> | <percentage> ]? )
Examples
Examples of correct values for opacity()
css
opacity(0%) /* Completely transparent */
opacity(50%) /* 50% transparent */
opacity() /* No effect */
opacity(1)
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-opacity |
Browser compatibility
Loading…
See also
- The other
<filter-function>functions available to be used in values of thefilterandbackdrop-filterproperties include: - The CSS
opacityproperty