Opacity & Transparency

CSS offers two distinct ways to make things transparent: the opacity property and the alpha channel built into colour functions.

The opacity Property

opacity accepts a value between 0 (invisible) and 1 (fully opaque). Critically, it affects the entire element and all its descendants — child text and images become transparent too.

Alpha Channel in Colors

Using rgb(r g b / alpha) or hsl(h s% l% / alpha) makes only the colour transparent, leaving child elements unaffected.

When to Use Which

Use opacity for fade-in/out animations of whole components. Use alpha-channel colours when you want a semi-transparent background but opaque text inside.

Example

/* opacity affects the element AND all children */
.modal-backdrop {
    background: #000;
    opacity: 0.6; /* children also become 60% visible */
}

/* Alpha channel — only the background is transparent */
.card-overlay {
    background: rgb(0 0 0 / 0.6);
    color: #fff; /* text stays fully opaque */
    padding: 1rem;
    border-radius: 8px;
}

/* Fade-in animation using opacity */
.fade-in {
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Semi-transparent button on hover */
.ghost-btn {
    background: transparent;
    border: 2px solid currentColor;
}
.ghost-btn:hover {
    background: rgb(26 115 232 / 0.1);
}

CSS

Full Editor

Pro Tip

Never use opacity: 0 to visually hide content from sighted users while keeping it accessible to screen readers — use visibility: hidden or a visually-hidden utility class instead.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned