代码来自头条号"前端小智", 侵权删
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: radial-gradient(#111, #000); display: flex; justify-content: center; align-items: center; } h2{ position: relative; color: transparent; text-transform: uppercase; font-size: 10em; background: linear-gradient(to bottom, #222 0%, #222 50%, #111 50%, #111 100%); -webkit-background-clip: text;/*指定绘图区的背景：*/ } h2::before{ /*伪元素的内容设为字体内容 背景设为黑白 层级再低一层*/ content: attr(data-text); position: absolute; top: 4px; left: 4px; z-index: -1; background: linear-gradient(45deg, #ff0, #0f0, #f00, #00f, #0f0); -webkit-background-clip: text; color: transparent; } h2::after{ /*做含糊成果*/ content: attr(data-text); position: absolute; top: 30px; left: 20px; z-index: -2; background: linear-gradient(45deg, #ff0, #0f0, #f00, #00f, #0f0); -webkit-background-clip: text; color: transparent; filter: blur(20px); } </style></head><body> <h2 data-text="glowing">glowing</h2></body></html>