opacity

Definition

The opacity property in CSS controls the transparency level of an element. It takes a value between 0 and 1, where 0 means completely transparent and 1 means completely opaque.

Examples

Make the element completely transparent:

.opacity-example {
  opacity: 0;
}

Make the element 50% transparent:

.opacity-example {
  opacity: 0.5;
}

Make the element completely opaque:

.opacity-example {
  opacity: 1;
}

Values

Best Practices

• Use opacity sparingly and only when necessary, as it can affect the legibility and accessibility of your content.
• Avoid using opacity on text, as it can make the text difficult to read. Instead, consider using a semi-transparent background color.
• Use a fallback color or image for elements with transparency, as older browsers may not support the opacity property.
• Consider using the rgba() color function instead of opacity to control the transparency of a background color, as it allows you to specify both the color and the transparency level.
• Avoid using opacity to hide elements from the screen reader, as it will still be announced. Instead, use the visibility or display property to hide the element.

Browser Compatibility