CSS Opacity Guides

Let's be transparent: Opacity is an important part of a CSS tookkit.

This is a collection of top and trending guides written by the community on subjects related to CSS Opacity concepts. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.

How to Change Background Opacity without Affecting Text

CSS can be tricky, and at times, frustrating to work with. One of the things I had trouble figuring out was how to change the opacity of a background without it also affecting the opacity of the text it contained.

---

Create a gradient opacity in CSS?

Hey dude ! How can I make a gradient opacity in CSS?

---

Changing Background Image Opacity Using before and after pseudo-elements

Oops! Now, we can't see our text that well. Maybe if we try reducing the opacity of our background image we can resolve this issue.

---

Broken Layered Opacity And Transform Rotation

When developing my Memory Matching game, I came across both of these issues within a few minutes of each other. Here's how I solved the issues with Layered Opacity (in general), then Transform Rotation (in the Safari browser).

---

How to change background image opacity in CSS

And to make the text stand out, you want to change the opacity of that background image in CSS so that it’s semi-transparent. But you’ve tried, and you can’t change the opacity of the background image without also affecting the text or other child elements!

---

Happy CSS Opacity coding!