看起来你正试图得到一个"玻璃般的外观"（给你一个关键字搜索）。

• • 编辑**，正确的关键词是glossy（原谅我的普通英语）-一个重复的，似乎罚款您的需要：Create a glossy light effect using CSS

然后，您可以看到，如果添加一个半透明的径向梯度上的线性梯度做的工作。
可能的调整示例：

.icon-wrapper {
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.25) 40%, transparent 45%), linear-gradient(#f79800, #03A678);
  display: inline-block;
  padding: 8px;
  border-radius:0.3em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="icon-wrapper">
  <i class="fa-solid fa-umbrella"></i>
</div>

下面是一个示例，说明如何调整代码以在div的右上角创建"发光"效果：请尝试以下操作：

<div style={{ 
    background: `linear-gradient(135deg, #f79800, #03A678, #f79800)`,
    background: `-webkit-linear-gradient(135deg, #f79800, #03A678, #f79800)`,
    background: `-o-linear-gradient(135deg, #f79800, #03A678, #f79800)`,
    background: `-moz-linear-gradient(135deg, #f79800, #03A678, #f79800)`
  }}>
  <Icon/>
</div>

我认为：after pseudo可以帮助你在你的背景上有一个透明的盖子，这样你就可以像那样实现你的目标，
在这里你可以找到一个例子，你的目标是得到什么。我希望它有帮助

div {
  height:150px;
  width:150px;
  background:radial-gradient(coral,lightpink);
  border:3px solid lightgray;
  border-radius:15px;
  margin:auto;
  text-align:center;
  align-content:center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8rem;
  font-weight:bold;
  font-family:cursive;
}
div:after {
  content:"";
  height:140px;
  width:140px;
  position:absolute;
  background:linear-gradient(45deg, white,lightgray);
  opacity:0.1;
  border-radius:15px;
  margin:5px;
}
span {
  color: lightgray;
  text-shadow: 0 0 3px gray;
}

<div><span>&copy;</span></div>