Opacity
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/opacity/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/opacity/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/opacity/)Use the native HTML custom element.
The degree to which a color or element blocks the content behind it, where 100% is fully opaque and 0% is fully transparent.
Opacity is the inverse of transparency. In CSS, opacity can be set using the opacity property (which affects the entire element and its children) or using alpha-channel color values like rgba() and hsla(). Opacity is essential for creating layered visual effects, overlay patterns, glass-morphism designs, and subtle background tints. When compositing semi-transparent colors, the visible result depends on both the foreground color and whatever is behind it, following the alpha compositing formula defined by Porter and Duff.
Try It Out
Related Articles
CSS color-mix(): Blend Colors Natively in the Browser
Learn CSS color-mix() to blend colors natively in the browser. Master syntax, color spaces, practical use cases, and create dynamic palettes without JavaScript.
Building a Color Picker Web Component from Scratch
Build an accessible color picker as a Web Component. Implement canvas rendering, hue sliders, alpha channels, and custom events with Shadow DOM.
Multi-Brand Color Architecture: One Codebase, Many Themes
Build multi-brand color architecture with CSS custom properties and design tokens. Support white-label theming from a single codebase with Tailwind integration.
Emerald vs Jade vs Forest Green: Green Comparison Guide
Compare emerald (#50C878), jade (#00A86B), and forest green (#228B22). Learn the visual and hex code differences between these popular green shades.
CSS light-dark() Function: Native Theme Switching
Use CSS light-dark() for native theme switching. Replace JavaScript toggles and media queries with a single CSS function for light and dark mode colors.
Generating Colorful OG Images with Next.js and Satori
Generate dynamic Open Graph images with Next.js and Satori. Create color-aware OG templates with gradients, brand colors, and responsive designs.