当前位置：首页 > CSS

css制作随机背景

2026-03-12 04:25:01CSS

使用线性渐变生成随机背景

通过CSS的linear-gradient可以创建随机颜色组合的背景。调整角度和颜色停止点能增强随机感：

body {
  background: linear-gradient(
    to right,
    hsl(${Math.random() * 360}, 100%, 50%),
    hsl(${Math.random() * 360}, 100%, 50%),
    hsl(${Math.random() * 360}, 100%, 50%)
  );
}

结合伪元素与模糊效果

通过伪元素创建多个彩色层并应用模糊效果，适合艺术化场景：

css制作随机背景

body::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 30% 60%, rgba(255,0,0,0.8), transparent),
    radial-gradient(circle at 70% 20%, rgba(0,255,0,0.6), transparent);
  filter: blur(30px);
  z-index: -1;
}

动态粒子背景实现

使用CSS动画创建移动粒子效果，需配合少量HTML：

css制作随机背景

<div class="particles"></div>

.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
.particles::after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: move 15s linear infinite;
  opacity: 0.7;
}
@keyframes move {
  from { transform: translateY(0) translateX(0); }
  to { transform: translateY(100vh) translateX(100vw); }
}

噪点纹理技术

通过SVG滤镜创建噪点纹理，再通过CSS应用：

body {
  background-color: #2c3e50;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

混合模式叠加

利用background-blend-mode实现颜色混合效果：

div {
  width: 100vw;
  height: 100vh;
  background: 
    linear-gradient(45deg, #ff0000, #00ff00),
    linear-gradient(135deg, #0000ff, #ffff00);
  background-blend-mode: overlay;
}