How to Create Transparent Box in CSS

16 April 2013

CSS Tricks, WebMasters

Make a Box Transparent Using CSS

This is a trick that will tell you how to create a transparent box with CSS (Cascading Style Sheet). This is done by “Opacity”  property of CSS. If we set the value of opacity as 1, box will be shown as normal (non-transparent). And if we set the value of opacity as “0”, then it will disappear.

So, if we set the value of opacity property between 0 and 1. Then the box will be transparent.

Normally, value of opacity for transparency is “0.5”.

(The box will be less transparent if value is “0.8” and highly transparent when value is “0.2”).

Below is the example and code of a transparent box.

HTML:

<div id=”transparent”>This is a transparent box in which text is written.

In this box, there can be paragraphs, headings as well as images and other elements.</div>

CSS:

#transparent {
padding:20px;
width: 250px;
border:1px solid black;
border-radius:20px;
background-color: #26FF00;
opacity: 0.5;
}

Box:

This is a transparent box in which text is written.
In this box, there can be paragraphs, headings as well as images and other elements.
, , , , , , , , , , , , , , , , , ,

One Response to “How to Create Transparent Box in CSS”

  1. Virginia Says:

    Hi, thanks for sharing!
    you said that the text or image inside the div tag,
    would not go transparent but all went transparent : (
    thank you if you share the way to keep transparent only the background

    Reply

Leave a Reply

*