CSS - set background opacity only (not whole element)

0 points
Created by:

In this article, we would like to show you how to set background opacity only and remain the whole element not transparent using CSS.

Quick solution:

div {
  background: rgba(0, 0, 255, 0.5);  /* blue color with opacity: 50%; */


Practical example

In this example, we create a transparent background using RGBA alpha parameter (the fourth parameter) set to 0.5, which means we set the background opacity to 50%.

// ONLINE-RUNNER:browser;

<!doctype html>

    body {
      height: 150px;
    div {
      height: 100px;
      width: 100px;
      background: orange;

    .transparent-background {
      border: 3px solid;
      position: absolute;
      top: 50px;
      left: 50px;

      /* required */
      background: rgba(255, 0, 0, 0.5);  /* red color with opacity: 50%; */

  <div class="transparent-background">Example text...</div>
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂