CODEWITHSUNDEEP
htmlcssradial-gradients
Elka
Elka

Reputation: 59

Radial gradient (but negative )on both sides of a div

So, I want to achieve this effect for the gradient, but Im out of ideas how. enter image description here

Here is codepen link https://codepen.io/christmastrex/pen/vYmyZWR

Here is my code

<div class="bg--red-gradient">
  <h2>Lorem ipsum lorem ipsum <br>lorem ipsum lorem ipsum.</h2>
</div>

.bg--red-gradient {
  margin: 0 auto;  
  text-align: center;
  color: #fff;
  max-width: 600px;
  padding: 10px 50px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(195, 50, 80, 1) 25%,
    rgba(195, 50, 80, 1) 50%,
    rgba(195, 50, 80, 1) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

The problem with my code is that the gradient is not radial at the ends. Any help?

Upvotes: 1

Views: 426

Answers (1)

DBS
DBS

Reputation: 9984

This can be achieved with two radial gradients each fading out to avoid overlapping:

.bg--red-gradient {
  margin: 0 auto;  
  text-align: center;
  color: #fff;
  max-width: 600px;
  padding: 10px 50px;
  background: 
    radial-gradient(
      circle at 0%, /* Position on the left edge */
      rgba(0,0,0,0) 0%, 
      rgba(0,0,0,0) 10%, /* This 10% value can be adjusted to change the radius of the gradient */
      rgba(195, 50, 80, 1) 50%,
      rgba(0,0,0,0) 100%
    ), 
    radial-gradient(
      circle at 100%, /* Position on the right edge */
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 10%,
      rgba(195, 50, 80, 1) 50%,
      rgba(0,0,0,0) 100%
    );
}
<div class="bg--red-gradient">
  <h2>Lorem ipsum lorem ipsum <br>lorem ipsum lorem ipsum.</h2>
</div>

Upvotes: 2

Related Questions