如何使用CSS实现向右的多色渐变并添加底部发光效果

以下是可直接复用的代码示例，你可以根据需求调整色彩和发光参数：

基础实现代码 #

HTML结构 #

<div class="gradient-box"></div>

CSS样式 #

.gradient-box {
  width: 400px;
  height: 250px;
  border-radius: 16px;
  /* 自定义渐变：可修改角度、增减色标、替换色值得到你想要的渐变效果 */
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  /* 底部发光效果：参数依次为 水平偏移 垂直偏移 模糊半径 发光颜色 */
  filter: drop-shadow(0 10px 30px rgba(245, 87, 108, 0.5));
}

参数调整说明 #

• 渐变修改：调整linear-gradient内的第一个参数控制渐变角度，后面追加色值即可增加渐变节点，色值支持十六进制、rgb、rgba等格式
• 发光修改：调整drop-shadow的参数即可自定义发光效果：
  • 第二个数值控制发光上下偏移，数值越大发光越靠下
  • 第三个数值控制发光模糊程度，数值越大发光范围越柔和
  • 最后颜色参数建议取渐变的主色，将透明度设置在0.3~0.7区间效果最佳
• 如需更有层次的发光，可叠加多个drop-shadow效果，示例：

  filter: drop-shadow(0 12px 30px rgba(245, 87, 108, 0.5)) drop-shadow(0 6px 15px rgba(240, 147, 251, 0.4));
  

兼容老版本浏览器的替代方案：给父元素设置position: relative，新增一个和父元素同宽的绝对定位伪元素，背景设置为渐变主色，添加filter: blur(25px)后放置在父元素底部即可实现同款发光效果。

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