svg(width='0' height='0')
filter#f(x='-50%' y='-200%' width='200%' height='500%')
//- create blurred copy
feGaussianBlur(stdDeviation='35')
//- bump up saturation of blurred copy
feColorMatrix(type='saturate' values='1.3')
//- slap original on top of blurred & saturated copy
feComposite(in='SourceGraphic')
//- no text duplication in the markup
h1 gradient text glow
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
@property --k {
syntax: '<number>';
initial-value: 0;
inherits: false
}
html, body { display: grid }
html { height: 100% }
body { background: #000 }
svg[height='0'] { position: absolute }
h1 { /* no pseudo needed */
--k: 0;
place-self: center;
background:
linear-gradient(90deg,
hsl(calc(var(--k)*1turn), 95%, 65%),
hsl(calc(var(--k)*1turn + 90deg), 95%, 65%));
-webkit-background-clip: text;
color: transparent;
font: 900 clamp(.875em, 7.25vw, 5em) arial black, sans-serif;
filter: url(#f);
text-align: center;
text-transform: uppercase;
/* needs support for animating custom properties */
/* Firefox not quite there yet, but it's coming */
animation: k 4s linear infinite
}
@keyframes k { to { --k: 1 } }