The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

System Check

Which value makes an element completely invisible?

opacity: 1opacity: 0opacity: 100display: block

Community Holo-Net

Share Ghost Effects

Created cool fade-in animations? Share your opacity snippets.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Opacity Property

Pascual Vila

Frontend Instructor.

The CSS opacity property specifies the transparency of an element. It allows you to make an element transparent, semi-transparent, or fully visible.

Values Range

Opacity takes a value between 0 and 1:

1: The default value. The element is fully opaque (visible).
0.5: The element is 50% transparent.
0: The element is fully transparent (invisible), but still takes up space in the layout.

Inheritance

When you apply opacity to an element, it affects the entire element, including its borders, background, and all child elements. A child element cannot be more opaque than its parent.

If you only want to make the background color transparent without affecting the text or children, use background-color: rgba(R, G, B, alpha) instead of the opacity property.

Accessibility

Elements with opacity: 0 are invisible to users but may still be reachable by keyboard navigation (Tab key) and read by screen readers. If you want to hide an element completely from assistive technology, use visibility: hidden or display: none.

Opacity Glossary

Opacity: A CSS property that sets the level of transparency for an element. 0 is invisible, 1 is fully visible.
RGBA: Red Green Blue Alpha. A color function that allows transparency (alpha) to apply only to a specific property (like background), without affecting child elements.
Visibility: Hidden: Hides the element visually like opacity: 0, but also removes it from the accessibility tree, though it still occupies layout space.
Alpha Channel: The channel in a color model that defines transparency.

📖 INDEX

Opacity Mastery

Concept 1: The Opacity Range