流动渐变

三团柔和的色块在标题后方彼此滑过，让背景有生气又不会抢走注意力。

CSS
背景
循环
收录于 2026-10-30

安静地流动

AI 提示词

用 CSS 为 React 首屏制作一个安静的流动渐变背景。在一个 overflow hidden 的容器内放置三个绝对定位的模糊圆形（filter: blur(40px)，尺寸约为容器的 60–70%），分别使用三种品牌色，不透明度约 70%。给每个圆设置各自的 keyframe，用 translate() 在三个位置之间移动，时长分别为 12 秒、15 秒和 18 秒，ease-in-out，infinite alternate，让组合效果看不出重复。只对 transform 做动画。在上方叠加细微噪点或 4% 的深色遮罩以保证文字对比度，并把标题“安静地流动”放在最上层。在 prefers-reduced-motion 下停止动画，色块保持在原位。

源代码

Demo.tsx

'use client'

import s from './demo.module.css'

export default function GradientDrift({ labels }: { labels: Record<string, string> }) {
  return (
    <div className={s.field}>
      <span className={`${s.blob} ${s.a}`} aria-hidden="true" />
      <span className={`${s.blob} ${s.b}`} aria-hidden="true" />
      <span className={`${s.blob} ${s.c}`} aria-hidden="true" />
      <p className={s.text}>{labels.text}</p>
    </div>
  )
}

demo.module.css

.field {
  --blob-a: oklch(66% 0.13 55);
  --blob-b: oklch(72% 0.1 85);
  --blob-c: oklch(48% 0.09 25);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--stage-bg);
}

.blob {
  position: absolute;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.7;
  will-change: transform;
}

.a { background: var(--blob-a); top: -20%; left: -10%; animation: a 12s ease-in-out infinite alternate; }
.b { background: var(--blob-b); top: 20%; right: -20%; animation: b 15s ease-in-out infinite alternate; }
.c { background: var(--blob-c); bottom: -35%; left: 20%; animation: c 18s ease-in-out infinite alternate; }

@keyframes a { 50% { transform: translate(30%, 20%); } 100% { transform: translate(10%, 45%); } }
@keyframes b { 50% { transform: translate(-35%, 10%); } 100% { transform: translate(-15%, -30%); } }
@keyframes c { 50% { transform: translate(25%, -25%); } 100% { transform: translate(-20%, -10%); } }

.text {
  position: relative;
  margin: 0;
  font: 700 var(--text-2xl) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--stage-ink);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}