Use our online tool to generate css opacity on div, image or a block of text. Opacity is a term that describes the degree to which something is not transparent to which it does not allow light to pass through. It is often used to refer to the opaqueness or lack of transparency in materials, substances, or objects.

Preview

Sample Text

Sample Text

Content Type
Div
Image
Text
Box Background
Color Options
0.8
Html Code
CSS Code


What is an Opacity and How do you control it?

Opacity refers to the degree of transparency in a graphical user interface. In web design, opacity is often used to control the transparency of HTML elements, such as text, images, or background colors. This allows designers to create visually appealing effects and layer elements on top of each other while maintaining varying levels of visibility.

Opacity is typically controlled using CSS (Cascading Style Sheets) properties. There are two primary CSS properties for controlling opacity:

  • opacity property: The opacity property is used to set the overall opacity of an element, affecting both its content and background. It takes a value between 0 and 1, where 0 represents completely transparent (invisible), and 1 represents completely opaque (fully visible).
  • The rgba() color function allows you to specify a color with an alpha (transparency) channel. It takes four values: red, green, blue, and alpha, where alpha is a number between 0 (fully transparent) and 1 (fully opaque).