如何在div元素的角落实现类发光效果的渐变背景

参考你需要的角落类发光渐变效果，用叠加径向渐变就能实现，具体代码如下：

完整代码 #

CSS #

.icon-wrapper {
  display: inline-block;
  padding: 16px;
  position: relative;
  background: #fff; /* 基础背景色可按需修改 */
}

.icon-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at top left, rgba(247,152,0,.4) 0%, transparent 30%),
    radial-gradient(circle at top right, rgba(3,166,120,.4) 0%, transparent 30%),
    radial-gradient(circle at bottom left, rgba(3,166,120,.4) 0%, transparent 30%),
    radial-gradient(circle at bottom right, rgba(247,152,0,.4) 0%, transparent 30%);
  pointer-events: none; /* 不影响内部元素交互 */
}

.icon-wrapper i {
  position: relative;
  z-index: 1;
  font-size: 24px;
}

HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

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

自定义调整 #

• 修改rgba中的透明度值（比如.4），可以控制发光的强弱，数值越大发光越明显
• 调整渐变终止的百分比（比如30%），能改变发光范围，数值越大发光覆盖面积越广
• 若只需要部分角落的效果，直接删掉对应位置的径向渐变即可

内容的提问来源于stack exchange，提问作者NikolaJov