如何使用CSS实现褶皱纸张背景效果？

云原生阿岚

2026-8-1

用纯CSS实现褶皱纸张背景可行吗？

完全可行！通过CSS的渐变、多重背景、伪元素以及滤镜等特性，可以模拟出接近真实褶皱纸张的效果，无需依赖任何图片资源。

实现思路

用线性渐变模拟纸张的底色和轻微明暗纹理
用多重径向渐变叠加出褶皱的阴影效果
借助伪元素添加边缘的褶皱细节
用filter: noise()和filter: blur()增强真实感

完整代码示例

.paper {
  width: 800px;
  height: 1000px;
  background: 
    /* 叠加褶皱阴影 */
    radial-gradient(circle at 20% 50%, rgba(0,0,0,0.05) 0%, transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.05) 0%, transparent 20%),
    radial-gradient(circle at 40% 20%, rgba(0,0,0,0.05) 0%, transparent 30%),
    radial-gradient(circle at 90% 40%, rgba(0,0,0,0.05) 0%, transparent 20%),
    radial-gradient(circle at 30% 80%, rgba(0,0,0,0.05) 0%, transparent 20%),
    /* 纸张底色 + 细微纹理 */
    linear-gradient(135deg, #f8f5f0 0%, #f0ece4 100%);
  position: relative;
  filter: noise(0.5%);
}

.paper::before, .paper::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.paper::before {
  /* 边缘褶皱阴影 */
  background: 
    linear-gradient(90deg, rgba(0,0,0,0.03) 0%, transparent 5%, transparent 95%, rgba(0,0,0,0.03) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.03) 0%, transparent 5%, transparent 95%, rgba(0,0,0,0.03) 100%);
  filter: blur(1px);
}

.paper::after {
  /* 随机褶皱线条 */
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.02) 2px,
      rgba(0,0,0,0.02) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.01) 2px,
      rgba(0,0,0,0.01) 4px
    );
  opacity: 0.5;
}