1. css
  2. /properties
  3. /opacity



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.


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;


valueA number between 0 and 1 that represents the level of transparency for the element. The default value is 1 (completely opaque).

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera