Opacity & Gradients in CSS

1. Opacity

The opacity property controls the transparency of an element. It accepts values from 0 (fully transparent) to 1 (fully opaque).

img.transparent {
    opacity: 0.5;
}
            

Opacity affects the entire element, including content and background.

Tip: Only Background Transparency

Use rgba() or hsla() to set transparency for background only (not text).

div.bg {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
}
            

2. CSS Gradients

Gradients are smooth transitions between two or more colors. CSS supports two main types:

Linear Gradient

div.linear {
    background: linear-gradient(to right, #4f46e5, #3b82f6);
}
            

Radial Gradient

div.radial {
    background: radial-gradient(circle, #10b981, #065f46);
}
            

You can define direction, shape, color stops, and use transparency in gradients too.

3. Gradient with Transparency

Combine rgba in gradients for fade effects:

div.fade {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
}
            

Conclusion

Opacity and gradients are powerful for creating modern, stylish, and user-friendly designs. Use them to subtly guide attention, add depth, and create visual interest.