渐变色背景

用两种颜色生成柔和渐变光晕。调整角度、模糊、偏移、缩放和圆角，预览与 CSS 会同步更新。

LIVE CANVAS

#F3A9C8 → #8E91FF

BITLEAP / GLOW CARD

Soft light.
Clear content.

光晕留在卡片外侧，内容层保持干净。适合 Hero、产品卡片、下载面板和强调区域。

COLOR

光的颜色。

建议让光晕颜色更饱和，让内容表面保持相对克制，这样层次会更稳定。

颜色 1

颜色 2

内容表面

角度-42°

模糊34px

水平偏移0px

垂直偏移22px

缩放94%

透明度72%

圆角28px

当前渐变linear-gradient(-42deg, #F3A9C8, #8E91FF)

EXPORT

可直接用的
CSS 结构。

这一版不再把光晕塞进卡片背景里，而是用外层负责光、内层负责内容，避免被 `overflow` 或负层级吃掉。

CSSLIVE OUTPUT

.glow-wrap {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.glow-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(-42deg, #F3A9C8, #8E91FF);
  transform: translate3d(0px, 22px, 0) scale(0.94);
  filter: blur(34px);
  opacity: 0.72;
  border-radius: 28px;
  pointer-events: none;
}

.glow-card {
  position: relative;
  z-index: 1;
  border-radius: 28px;
  background: #FFFDFC;
}

HTML

<div class="glow-wrap">
  <div class="glow-card">
    Your content
  </div>
</div>

BLUR

模糊越高，边缘越柔，但范围也会向外扩散更多。

OFFSET

轻微向下偏移会更像环境光，而不是规则描边。

LAYERING

外层产生光晕，内层保持不透明表面，CSS 更稳定也更容易复用。

BitLeap · 本地计算 · 隐私优先

光的颜色。

可直接用的CSS 结构。

可直接用的
CSS 结构。