如何在div的角落制作渐变像发光答案

【问题标题】：How to make gradient like glow in corner of a div如何在div的角落制作渐变像发光
【发布时间】：2023-01-21 03:28:58
【问题描述】：

我正在尝试像上面的照片一样在 div 的一角制作类似发光的渐变（颜色并不重要）

我试过了：

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

.icon-wrapper {
  background: linear-gradient(#f79800, #03A678);
  display: inline-block;
  padding: 8px;
}

<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>

【问题讨论】：

FWIW 这似乎与 CSS 无关；考虑只为此显示呈现的 HTML。
我添加了一个 sn-p 演示。它是否准确地反映了您的情况？
你问的是发光还是关于反射？
@isherwood 那是我的情况。我正在尝试在 div 的左上角实现弯曲的白光
这是一个有光泽的反射，而不是发光。如果你搜索它，你会得到更好的结果，而且它已经被彻底覆盖了。

标签： css reactjs gradient

【解决方案1】：

下面是一个示例，说明如何调整代码以在 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>

【讨论】：

到 2023 年，这些供应商前缀都不是必需的。请参阅caniuse.com/css-gradients。