CSS
HTML
COMPONENTS
CODE HUB
CSS Opacity Generator
Configuration
Opacity
Class
Preview
Code
opacity: 50%;Learn to Code with Lara
Master programming concepts step-by-step with your interactive AI tutor. Lara explains complex logic, reviews your practice exercises, and helps you build a solid foundation in software development.
Interactive coding lessons tailored to your own pace.
Start learning with LaraCSS Opacity Generator
In CSS, you can control theopacity (transparency) of an HTML element using the opacity property. The opacity property accepts a value between 0 and 1, where 0 represents fully transparent (invisible), and 1 represents fully opaque (completely visible).
Here's how you can use the opacity property in CSS:
.opacity-element {
opacity: 0.5;}
In this example:
The .opacity-element class sets the opacity of the element to 50%, making it semi-transparent.
You can adjust the value of the opacity property to control the degree of transparency you want for the element. For example, opacity: 0.2; would make the element very transparent, while opacity: 0.8; would make it only slightly transparent.
Here's another example with full opacity and a hover effect to change the opacity on mouse hover:
.full-opacity-element {
opacity: 1;
transition: opacity 0.3s;
}
.full-opacity-element:hover {
opacity: 0.7;
}
In this case:
- The .full-opacity-element: class initially sets the element to fully opaque (100% opacity).
- The transition property adds a smooth transition effect for the opacity change.
- On hover (.full-opacity-element:hover), the opacity is reduced to 70%, creating a hover effect.
The opacity property is commonly used for creating hover effects, fading animations, or adjusting the visibility of elements based on user interactions. It's a useful tool for controlling element transparency and adding depth to your website's design.