div 两侧的径向渐变但为负

问题描述

所以，我想为渐变实现这种效果，但我不知道如何实现。

这是代码笔链接 https://codepen.io/christmastrex/pen/vYmyZWR

这是我的代码

<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%,rgba(195,50,80,1) 25%,1) 50%,1) 75%,0) 100%
  );
}

我的代码的问题是渐变在末端不是径向的。有什么帮助吗？

解决方法

这可以通过两个径向渐变来实现，每个渐变都逐渐淡出以避免重叠：

.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%,rgba(0,0) 10%,/* This 10% value can be adjusted to change the radius of the gradient */
      rgba(195,50,80,1) 50%,0) 100%
    ),radial-gradient(
      circle at 100%,/* Position on the right edge */
      rgba(0,rgba(195,0) 100%
    );
}

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