如何使用纯CSS实现点状粒子化文字效果？

API 探路者

2026-7-15

纯CSS实现点状粒子化文字效果

核心方案：CSS背景裁剪+重复渐变

不用图片编辑或Three.js，仅通过background-clip: text结合重复径向渐变就能实现点状粒子填充文字的效果，直接解决你之前遇到的遮罩和透明问题。

基础实现代码

<div class="particle-text">粒子化文字</div>

.particle-text {
  font-size: 8rem;
  font-weight: bold;
  /* 关键：将文字设为透明，让背景能透出来 */
  color: transparent;
  /* 生成单个圆点的径向渐变，重复排列形成粒子效果 */
  background-image: radial-gradient(#000 20%, transparent 20%);
  /* 控制粒子的大小和间距 */
  background-size: 12px 12px;
  /* 将背景严格裁剪到文字形状内部 */
  background-clip: text;
  /* 兼容webkit内核浏览器 */
  -webkit-background-clip: text;
}

效果调整技巧

修改radial-gradient中的#000可更换粒子颜色，调整百分比（如20%）能控制粒子大小
调整background-size的数值可改变粒子的间距和大小比例

想要粒子有随机错落感？可以叠加多层不同位置的渐变：

background-image: 
  radial-gradient(#000 20%, transparent 20%),
  radial-gradient(#000 20%, transparent 20%);
background-position: 0 0, 6px 6px;

若需要保留文字底色+粒子叠加效果，用伪元素做双层文字：

<div class="particle-text" data-text="粒子化文字">粒子化文字</div>

.particle-text {
  position: relative;
  font-size: 8rem;
  font-weight: bold;
  color: #333; /* 文字基础底色 */
}
.particle-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-image: radial-gradient(#ff4444 20%, transparent 20%);
  background-size: 12px 12px;
  background-clip: text;
  -webkit-background-clip: text;
  mix-blend-mode: multiply; /* 让粒子和底色自然融合 */
}