Online CSS Opacity Generator

What is Opacity?

The opacity property in CSS specifies how transparent a graphic, image, or graphic element is.

Opacity has a by default initial value, that is 1 that means it is 100% opaque. Opacity is not inherited, but because the parent has opacity that applies to everything within it. It is not possible to make a child element less transparent than the parent element, without some trickery. When an element has a value of opacity 0 that means the element is completely invisible, and opacity value of 1 means the element is completely visible.

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read.

Now here is our tool "Online CSS Opacity Generator" that will help you to select appropriate opacity that you want, and also you will get the css code.

Now try CSS Opacity Generator tool:

Preview

Output Code

Created by Tech Zoop

Do you want to add this tools in your blog?

Yes, you can also add this CSS tools in your blog or webpage. If you want to add this tools in your blog then just follow the below steps:

Step 1: Login to your blog and go to Pages menu and create a new page with a appropriate name.

Step 2: Now go to HTML section, now copy the below code and paste it in the HTML section.

<link href="https://googledrive.com/host/0B7huuE2RFtfqMnZQLVN0UFkwTjg" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0B7huuE2RFtfqZWgyZngwVHRFams" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B7huuE2RFtfqSGpUcElIX1ZVRXc"></script>
<link href="https://googledrive.com/host/0B7huuE2RFtfqaEs1UHdUbm9TQzg" rel="stylesheet" type="text/css"></link>
<script src="https://googledrive.com/host/0B7huuE2RFtfqbmdmSW5GNXVEcDA" type="text/javascript"></script>
<br />

<!--      Opacity Generator Starts     -->
<div class="preview" id="preview_opacity">
<h2>
Preview</h2>
</div>
<div class="slider" id="opacity_slider">
</div>
<div class="center-align">
<h4>
Output Code</h4>
</div>
<div id="result_opacity">
</div>
<!--      Opacity Generator Ends     -->
<br />
<div style="text-align: center;">
Created by <a href="http://www.techzoop.com/" id="mycontent">Tech Zoop</a>
</div>

Note: Please do not remove the credit link, otherwise the code will not work...

Step 3: Now Update/Publish the page and you will see the result.

If you will face any issue regarding this tool, fell free to ask me. Just drop a comment here or you can mail me through our Contact Us page. I will get back to you very soon.