Skip to main content

CSS Opacity

In CSS, the opacity property is used to set the transparency of an element. It can take a value from 0.0 (fully transparent) to 1.0 (fully opaque). The opacity property affects the entire element, including its text and any child elements. By adjusting the opacity of an element, you can create visually appealing effects such as transparent overlays, faded images, and subtle text highlights.

Syntax​

The opacity property in CSS has the following syntax:

index.css
selector {
  opacity: value;
}
  • selector: The CSS selector that targets the element you want to apply the opacity to.
  • value: A number between 0.0 and 1.0 that represents the level of transparency. A value of 0.0 makes the element fully transparent, while a value of 1.0 makes it fully opaque.
  • The opacity property is inherited by child elements, meaning that any child elements of the transparent element will also have the same level of transparency.
  • The opacity property can be applied to any HTML element, including text, images, backgrounds, and containers.
  • The opacity property does not affect the position or layout of the element. It only changes the visual appearance by making the element more or less transparent.

Examples​

1. Making an Element Transparent​

You can use the opacity property to make an element transparent by setting its value to less than 1.0. In the following example, we make a div element 50% transparent:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transparent Element</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="transparent-element">
  <p>This is a transparent element.</p>
  </div>
</body>
</html>

Now, you can see the output of the above code in the Browser Window like this:

http://127.0.0.1:5500/index.html
This is a transparent element.
Try it yourself

You can adjust the opacity value to make the element more or less transparent. Experiment with different opacity levels to see how it affects the visual appearance of the element.

2. Fading an Image on Hover​

You can create a fading effect on an image by changing its opacity when the user hovers over it. In the following example, we use the :hover pseudo-class to fade an image to 50% opacity when the mouse cursor is over it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fading Image</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="image-container">
    <img src="image.jpg" alt="Fading Image" class="fading-image">
  </div>
</body>
</html>

Now, you can see the output of the above code in the Browser Window like this:

http://127.0.0.1:5500/index.html
Fading Image

3. Highlighting Text with Opacity​

You can use the opacity property to highlight text by making it partially transparent. In the following example, we apply a 70% opacity to a paragraph of text to create a subtle highlight effect:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highlighted Text</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="highlighted-text">This is highlighted text.</p>
</body>
</html>

Now, you can see the output of the above code in the Browser Window like this:

http://127.0.0.1:5500/index.html

This is highlighted text.

By using the opacity property in CSS, you can create various visual effects on your web page, such as transparent elements, faded images, and highlighted text. Experiment with different opacity values to achieve the desired level of transparency and enhance the visual appeal of your website.

Try it yourself

Compare this snippet from CSS Box Model to learn how to use the CSS box model to control the layout and spacing of elements on your web page.

Conclusion​

In this guide, you learned how to use the CSS opacity property to create transparent elements and text on your web page. By adjusting the opacity of an element, you can control its level of transparency and create visually appealing effects. The opacity property is a powerful tool for enhancing the visual design of your website and adding subtle highlights to text and images.