CSS opacity Property

CSS opacity property specifies the transparency level of an element.

The value of the opacity ranges from 0 to 1. The lower the value of the opacity, the higher the level of transparency.

The opacity value 0 specifies that the element will become fully transparent and opacity value 1 specifies that the element will not be transparent at all. The opacity: 0.5; will make the element 50% transparent. Refer to the example below:


  opacity: 1;
  opacity: 0.5;
  opacity: 0.1;

CSS Syntax

The opacity property has the below syntax:

opacity: number|initial|inherit;

Property Values

The opacity property accepts the following values:

numberThe default value is 1. Specifies the opacity level. It ranges from 0 to 1. The lower the value, the higher the transparency.
initialSets the opacity property to its default value(1).
inheritInherits the opacity property from the parent element.

General Info

Default Value1
JavaScript Usageelement.style.opacity = “0.5”;


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment