Select Theme
default
3024-day
3024-night
abcdef
ambiance-mobile
ambiance
ayu-dark
ayu-mirage
base16-dark
base16-light
bespin
blackboard
cobalt
colorforth
darcula
dracula
duotone-dark
duotone-light
eclipse
elegant
erlang-dark
gruvbox-dark
hopscotch
icecoder
idea
isotope
lesser-dark
liquibyte
lucario
material-darker
material-ocean
material-palenight
material
mbo
mdn-like
midnight
monokai
moxer
neat
neo
night
nord
oceanic-next
panda-syntax
paraiso-dark
paraiso-light
pastel-on-dark
railscasts
rubyblue
seti
shadowfox
solarized
ssms
the-matrix
tomorrow-night-bright
tomorrow-night-eighties
ttcn
twilight
vibrant-ink
xq-dark
xq-light
yeti
yonce
zenburn
13
14
15
16
17
18
19
20
<!DOCTYPE html> <html> <head> <style> body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; } .neon { position: relative; overflow: hidden; filter: brightness(200%); } .text { background-color: black; color: white; font-size: 10vw; font-weight: bold; font-family: sans-serif; text-transform: uppercase; position: relative; user-select: none; } .text::before { content: attr(data-text); position: absolute; color: white; filter: blur(0.02em); mix-blend-mode: difference; } .gradient { position: absolute; background: linear-gradient(45deg, red, gold, lightgreen, gold, red); top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: multiply; } .spotlight { position: absolute; top: -100%; left: -100%; right: 0; bottom: 0; background: radial-gradient(circle, white, transparent 25%) center / 25% 25%, radial-gradient(circle, white, black 25%) center / 12.5% 12.5%; animation: light 5s linear infinite; mix-blend-mode: color-dodge; } @keyframes light { to { transform: translate(50%, 50%); } } </style> </head> <body> <div class="neon"> <span class="text" data-text="lala computer">lala computer</span> <span class="gradient"></span> <span class="spotlight"></span> </div> </body> </html>