Make elements translucent & semi-transparent with CSS – the bulletproof solution to CSS transparency

• Tweet

• Tweet

Take a div of class translucent for example, you can literally make it translucent with the following CSS rules. It’s bulletproof, meaning that all the browsers will render it as you have specified. Enjoy!

div.translucent { /* this class makes a window partially transparent */
    opacity: .5;               /* Standard style for transparency */
    -moz-opacity: .5;          /* Transparency for older Mozillas */
    filter: alpha(opacity=50);  /* Transparency for IE */
}