<h1 id="heading-css-opacity-transparency"><strong>CSS Opacity / Transparency</strong></h1>
<p>The <code>opacity</code> property specifies the opacity/transparency of an element.</p>
<h1 id="heading-transparent-image">Transparent Image</h1>
<p>The <code>opacity</code> property can take a value from 0.0 - 1.0. The lower the value, the more transparent:</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1686049509599/1b91d77c-5978-4b6a-8bb7-95e9f63efc88.png" alt class="image--center mx-auto" /></p>
<p>Example</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1686049567156/60f77453-3cba-400e-876a-62ff27871403.png" alt class="image--center mx-auto" /></p>
<hr />
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png" alt="image.png" /></p>
<p>Download our HTML &amp; CSS Visual Treat! ebook Here: <a target="_blank" href="https://codemarch.gumroad.com/l/hxazr">Click here</a></p>


# **CSS Opacity / Transparency**

The `opacity` property specifies the opacity/transparency of an element.

# Transparent Image

The `opacity` property can take a value from 0.0 - 1.0. The lower the value, the more transparent:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686049509599/1b91d77c-5978-4b6a-8bb7-95e9f63efc88.png align="center")

Example

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686049567156/60f77453-3cba-400e-876a-62ff27871403.png align="center")

---

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png align="left")

Download our HTML & CSS Visual Treat! ebook Here: [Click here](https://codemarch.gumroad.com/l/hxazr)

CSS Opacity

Table of contents

CSS Opacity / Transparency

Transparent Image