CODEWITHSUNDEEP
csslinear-gradients
Ramil Amparo
Ramil Amparo

Reputation: 632

How to put gradient opacity in my gradient?

In the mockup I have, the stripes have a gradient opacity effect from transparent to semi-transparent. Gradient stripes

Currently, I have this:

enter image description here

How do I make it so that the white stripes have the transparency gradient?

Here is my current code.

    body {
      background: gray;
    }

    .bar {
      height: 50px;
      width: 100%;
      background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
      border-radius: 100rem;
      position: relative;
    }
    /** Stripes. */
    .bar::before {
      content: "";
      position: absolute;
      border-radius: 100rem;
      height: 100%;
      width: 100%;
      background-size: 90px 100%;
      background-image: linear-gradient(
        120deg,
        transparent,
        transparent 40%,
        white 40%,
        white 60%,
        transparent 60%
      );
    }
<div class="bar"></div>

Upvotes: 0

Views: 5662

Answers (2)

Temani Afif
Temani Afif

Reputation: 272723

You can add a mask layer on the pseudo-element:

body {
  background: gray;
}

.bar {
  height: 50px;
  width: 100%;
  background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
  border-radius: 100rem;
  position: relative;
}


/** Stripes. */

.bar::before {
  content: "";
  position: absolute;
  border-radius: 100rem;
  height: 100%;
  width: 100%;
  background-size: 90px 100%;
  background-image: linear-gradient( 120deg, transparent 40%, white 41% 60%, transparent 61%);
  -webkit-mask:linear-gradient(white,transparent);
          mask:linear-gradient(white,transparent);
}
<div class="bar"></div>

Upvotes: 6

Chris W.
Chris W.

Reputation: 23270

In case you need better browser support than masks provide, I'd do something with an additional container, but overall it's a funny looking progress bar, hope it's for a kids game or something.

body {
  background: gray;
  padding-top: 5rem;
}


.bar-container {
  border-radius: 100rem;
  overflow: hidden;
  border: darkgray 2px solid;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
}

.bar {
  height: 50px;
  width: 100%;
  position: relative;
  background-size: 90px 100%;
  background-image: linear-gradient(
    120deg,
    transparent,
    transparent 40%,
    white 40%,
    white 60%,
    transparent 60%
  );
}

.bar::before, .bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.bar::before {
  left: 0;
  background: linear-gradient(45deg, rgba(252,2,82,1) 0%, rgba(0,0,0,0) 50%);  
}

.bar::after {
  right: 0;
  background: linear-gradient(-45deg, rgba(1,253,217,1) 0%, rgba(0,0,0,0) 50%);  
}
<div class="bar-container">
  <div class="bar"></div>
</div>

Upvotes: 1

Related Questions