如何实现从右上角发出的响应式CSS光晕效果？

要实现从右上角扩散的响应式光晕，核心是用相对定位容器+绝对定位光晕元素，配合径向渐变与模糊滤镜，同时用视口单位/百分比保证适配不同屏幕尺寸，解决你之前遇到的视口问题。

核心实现代码 #

HTML结构

<!-- 页面主容器 -->
<div class="page-wrapper">
  <!-- 你的页面内容 -->
  <h1>页面内容示例</h1>
  <p>这是页面的正文内容，光晕会在右上角作为背景层显示</p>
</div>

CSS样式

.page-wrapper {
  position: relative;
  min-height: 100vh; /* 确保容器占满视口高度 */
  padding: 2rem;
  box-sizing: border-box;
}

/* 用伪元素实现光晕，避免额外DOM节点 */
.page-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  /* 用vw/vh单位保证响应式，尺寸可按需调整 */
  width: 50vw;
  height: 50vh;
  /* 径向渐变：从右上角向外扩散，颜色/透明度可自定义 */
  background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.4), transparent 70%);
  /* 模糊滤镜，数值越大光晕越柔和 */
  filter: blur(50px);
  /* 禁止光晕阻挡页面交互 */
  pointer-events: none;
  /* 把光晕放在内容下方 */
  z-index: -1;
}

关键细节说明 #

• 响应式适配：用vw（视口宽度百分比）和vh（视口高度百分比）定义光晕尺寸，会随屏幕自动缩放，不会出现偏移或溢出问题。
• 定位逻辑：主容器设position: relative，光晕伪元素绝对定位在top:0; right:0，始终固定在容器右上角，不会脱离布局流。
• 光晕效果微调：
  • 调整径向渐变的颜色值（比如rgba(129,140,248,0.3)）和透明度，匹配你需要的色调；
  • 修改blur()的数值（比如40px或60px）控制模糊程度；
  • 若想让光晕更向外延伸，可设置top: -15%; right: -15%，同时增大width和height。

进阶优化（多色叠加光晕） #

如果需要更丰富的光晕层次，可以叠加多个伪元素：

.page-wrapper::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -20%;
  width: 60vw;
  height: 60vh;
  background: radial-gradient(circle, rgba(168,85,247,0.2), rgba(129,140,248,0.15), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

.page-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40vw;
  height: 40vh;
  background: radial-gradient(circle at top right, rgba(217,70,239,0.25), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

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