It applies to the entire element and its contents, offering options like numbers, percentages, and global values.
Introduction
The CSS opacity
property is a powerful tool for web developers. It helps control the transparency of an element, making it fully transparent, translucent, or fully opaque. This property is widely supported across devices and browsers. By using opacity
, you can enhance the visual appeal of your web pages.
Specification
The opacity
property is defined in the CSS Color Module Level 4 specification. For detailed information, you can refer to the official specification:
- [CSS Color Module Level 4 - Transparency]WebsiteUrl
Description
The opacity
property controls how transparent an element is. A value of 0
makes the element fully transparent, while 1
makes it fully opaque. You can also use percentages, where 0%
is fully transparent and 100%
is fully opaque.
When you set opacity
, it applies to the entire element, including its contents. However, it does not affect child elements individually. To change the opacity of just the background, use the background
property with a color value that includes an alpha channel.
Syntax
The opacity
property is easy to use. Here is the basic syntax:
You can set the opacity
property using various values:
- A number between
0
and1
(e.g.,0.9
). - A percentage between
0%
and100%
(e.g.,90%
). - Global values such as
inherit
,initial
,revert
,revert-layer
, andunset
.
Example:
Values
The opacity
property accepts several types of values:
<alpha-value>
: A<number>
in the range0.0
to1.0
, or a<percentage>
in the range0%
to100%
. Any value outside this range will be clipped to the nearest limit.
Value | Meaning |
---|---|
0 | The element is fully transparent (invisible). |
Any <number> strictly between 0 and 1 | The element is translucent (content behind the element can be seen). |
1 (default value) | The element is fully opaque (visually solid). |
Examples
Here are practical examples to illustrate how the opacity
property can be used in CSS.
Setting Opacity
This example shows how the opacity
property changes the opacity of the entire element and its content.
HTML
CSS
Setting Opacity on Hover
In this example, the opacity is changed on hover, so the striped background image on the parent element shows through the image.
HTML
CSS
Styling Based on User Preferences
To style elements based on the user’s operating system transparency preferences, use the prefers-reduced-transparency
media query.
CSS
Transitioning Opacity
Transitioning the opacity of elements can create smooth and visually appealing animations. This is particularly useful when you want to gradually show or hide elements, enhancing the user experience.
CSS
Accessibility
When using the opacity
property, it’s crucial to consider accessibility to ensure that your web content is usable by everyone, including those with visual impairments. Here are some key points to keep in mind:
Text Contrast
If you adjust the opacity of text, make sure that the contrast ratio between the text color and the background color remains high enough for people with low vision conditions to read the content. According to the Web Content Accessibility Guidelines (WCAG), a contrast ratio of at least 4.5:1 is required for text content, and 3:1 for larger text such as headings.
- Large Text: Defined as 18.66px and bold, or 24px and larger.
User Preferences
Various operating systems provide a preference for reducing transparency. To respect these preferences, use the prefers-reduced-transparency
media query. This allows you to set the opacity
based on the user’s operating system transparency preferences.
Example
Hidden Elements
Setting the opacity
value to 0
makes elements and their children invisible but keeps them in the DOM. They still respond to pointer events and can receive focus if they’re in the tabbing order. For good usability, make these elements visible when they receive user interactions, or use the pointer-events
property to disable pointer events. You can also take the element out of the tab order by using the disabled
attribute or setting tabindex="-1"
for non-form-related interactive elements.
Screen Readers
Don’t use opacity
alone to provide information to screen readers. Instead, use the hidden
attribute, visibility
, or display
properties. If an element is hidden with opacity
, also hide it from screen readers using the aria-hidden
attribute to ensure accessibility.
Tools and Resources
- [WebAIM: Color Contrast Checker]WebsiteUrl
- [MDN Understanding WCAG, Guideline 1.4 explanations]WebsiteUrl
- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0]WebsiteUrl
Formal Definition
The opacity
property in CSS has specific characteristics for consistent behavior:
Property | Value |
---|---|
Initial Value | 1 |
Applies To | All elements |
Inherited | No |
Percentages | Map to the range [0,1] |
Computed Value | Same as the specified value after clipping the <number> to the range [0.0, 1.0] |
Animation Type | By computed value type |
Formal Syntax
The formal syntax of the opacity
property is:
<number>
: A number between0
and1
, inclusive.<percentage>
: A percentage between0%
and100%
, inclusive.
Browser Compatibility
The opacity
property is widely supported across modern browsers:
- Chrome: Since version 4.0 (January 2010).
- Firefox: Since version 2.0 (January 2010).
- IE/Edge: Since version 9.0 (March 2011).
- Opera: Since version 9.0 (June 2006).
- Safari: Since version 3.1 (March 2008).
For detailed compatibility information, refer to the BCD (Browser Compatibility Data) tables.
See Also
For further reading and related topics, check out:
- [
prefers-reduced-transparency
]WebsiteUrl media query - [CSS color]WebsiteUrl module
Syntax
The opacity
property in CSS is straightforward:
You can set the opacity
property using various values:
- A number between
0
and1
(e.g.,0.9
). - A percentage between
0%
and100%
(e.g.,90%
). - Global values such as
inherit
,initial
,revert
,revert-layer
, andunset
.
Example usage:
Values
The opacity
property accepts several types of values:
<alpha-value>
: A<number>
in the range0.0
to1.0
, or a<percentage>
in the range0%
to100%
. Any value outside this range will be clipped to the nearest limit.
Value | Meaning |
---|---|
0 | The element is fully transparent (invisible). |
Any <number> strictly between 0 and 1 | The element is translucent (content behind the element can be seen). |
1 (default value) | The element is fully opaque (visually solid). |
Examples
Here are practical examples of using the opacity
property.
Setting Opacity
This example shows how the opacity
property affects the entire element and its content:
HTML
CSS
Setting Opacity on Hover
This example changes the opacity of an image on hover:
HTML
CSS
Styling Based on User Preferences
Use the prefers-reduced-transparency
media query to adjust opacity based on user preferences:
CSS
Transitioning Opacity
Create smooth transitions for opacity changes:
CSS
These examples show how to use the opacity
property to enhance the visual appeal and interactivity of your web designs.
Accessibility
When using the opacity
property, it’s crucial to consider accessibility to ensure that your web content is usable by everyone, including those with visual impairments. Here are some key points to keep in mind:
Text Contrast
If you adjust the opacity of text, make sure that the contrast ratio between the text color and the background color remains high enough for people with low vision conditions to read the content. According to the Web Content Accessibility Guidelines (WCAG), a contrast ratio of at least 4.5:1 is required for text content, and 3:1 for larger text such as headings.
- Large Text: Defined as 18.66px and bold, or 24px and larger.
User Preferences
Various operating systems provide a preference for reducing transparency. To respect these preferences, use the prefers-reduced-transparency
media query. This allows you to set the opacity
based on the user’s operating system transparency preferences.
Example
Hidden Elements
Setting the opacity
value to 0
makes elements and their children invisible but keeps them in the DOM. They still respond to pointer events and can receive focus if they’re in the tabbing order. For good usability, make these elements visible when they receive user interactions, or use the pointer-events
property to disable pointer events. You can also take the element out of the tab order by using the disabled
attribute or setting tabindex="-1"
for non-form-related interactive elements.
Screen Readers
Don’t use opacity
alone to provide information to screen readers. Instead, use the hidden
attribute, visibility
, or display
properties. If an element is hidden with opacity
, also hide it from screen readers using the aria-hidden
attribute to ensure accessibility.
Tools and Resources
- [WebAIM: Color Contrast Checker]WebsiteUrl
- [MDN Understanding WCAG, Guideline 1.4 explanations]WebsiteUrl
- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0]WebsiteUrl
Formal Definition
The opacity
property in CSS has specific characteristics for consistent behavior:
Property | Value |
---|---|
Initial Value | 1 |
Applies To | All elements |
Inherited | No |
Percentages | Map to the range [0,1] |
Computed Value | Same as the specified value after clipping the <number> to the range [0.0, 1.0] |
Animation Type | By computed value type |
Formal Syntax
The formal syntax of the opacity
property is:
<number>
: A number between0
and1
, inclusive.<percentage>
: A percentage between0%
and100%
, inclusive.
Browser Compatibility
The opacity
property is widely supported across modern browsers:
- Chrome: Since version 4.0.
- Firefox: Since version 2.0.
- IE/Edge: Since version 9.0.
- Opera: Since version 9.0.
- Safari: Since version 3.1.
See Also
For further reading and related topics, check out:
- [
prefers-reduced-transparency
]WebsiteUrl media query - [CSS color]WebsiteUrl module
Examples
Here are practical examples of using the opacity
property.
Setting Opacity
This example shows how the opacity
property affects the entire element and its content:
HTML
CSS
Setting Opacity on Hover
This example changes the opacity of an image on hover:
HTML
CSS
Styling Based on User Preferences
Use the prefers-reduced-transparency
media query to adjust opacity based on user preferences:
CSS
Transitioning Opacity
Create smooth transitions for opacity changes:
CSS
These examples show how to use the opacity
property to enhance the visual appeal and interactivity of your web designs.
Accessibility
When using the opacity
property, it’s crucial to consider accessibility to ensure that your web content is usable by everyone, including those with visual impairments. Here are some key points to keep in mind:
Text Contrast
If you adjust the opacity of text, make sure that the contrast ratio between the text color and the background color remains high enough for people with low vision conditions to read the content. According to the Web Content Accessibility Guidelines (WCAG), a contrast ratio of at least 4.5:1 is required for text content, and 3:1 for larger text such as headings.
- Large Text: Defined as 18.66px and bold, or 24px and larger.
User Preferences
Various operating systems provide a preference for reducing transparency. To respect these preferences, use the prefers-reduced-transparency
media query. This allows you to set the opacity
based on the user’s operating system transparency preferences.
Example
Hidden Elements
Setting the opacity
value to 0
makes elements and their children invisible but keeps them in the DOM. They still respond to pointer events and can receive focus if they’re in the tabbing order. For good usability, make these elements visible when they receive user interactions, or use the pointer-events
property to disable pointer events. You can also take the element out of the tab order by using the disabled
attribute or setting tabindex="-1"
for non-form-related interactive elements.
Screen Readers
Don’t use opacity
alone to provide information to screen readers. Instead, use the hidden
attribute, visibility
, or display
properties. If an element is hidden with opacity
, also hide it from screen readers using the aria-hidden
attribute to ensure accessibility.
Tools and Resources
- [WebAIM: Color Contrast Checker]WebsiteUrl
- [MDN Understanding WCAG, Guideline 1.4 explanations]WebsiteUrl
- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0]WebsiteUrl
Formal Definition
The opacity
property in CSS has specific characteristics for consistent behavior:
Property | Value |
---|---|
Initial Value | 1 |
Applies To | All elements |
Inherited | No |
Percentages | Map to the range [0,1] |
Computed Value | Same as the specified value after clipping the <number> to the range [0.0, 1.0] |
Animation Type | By computed value type |
Formal Syntax
The formal syntax of the opacity
property is:
<number>
: A number between0
and1
, inclusive.<percentage>
: A percentage between0%
and100%
, inclusive.
Browser Compatibility
The opacity
property is widely supported across modern browsers:
- Chrome: Since version 4.0.
- Firefox: Since version 2.0.
- IE/Edge: Since version 9.0.
- Opera: Since version 9.0.
- Safari: Since version 3.1.
See Also
For further reading and related topics, check out:
- [
prefers-reduced-transparency
]WebsiteUrl media query - [CSS color]WebsiteUrl module
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.