Skip to content

Instantly share code, notes, and snippets.

@AntiMoron

AntiMoron/glowing_text_css.html

Last active August 21, 2023 06:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AntiMoron/b4df2162622909982364879b9702def3 to your computer and use it in GitHub Desktop.
Save AntiMoron/b4df2162622909982364879b9702def3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
glowing_text_css.html
<!DOCTYPE html>
<html>
<head>
<title>Glowing Text Effect in CSS</title>
<style>
@keyframes glowingText {
0% {
text-shadow: 0 0 0.02em hsl(50 100% 50% / 1), 0 0 0.1em hsl(40 100% 63% / 1),
0 0 0.2em hsl(37 100% 62% / 1), 0 0 0.6em hsl(33 100% 58% / 1),
0 0 0.8em hsl(30 100% 54% / 1);
}
100% {
text-shadow: 0 0 0.02em hsl(50 100% 50% / 1), 0 0 0.1em hsl(40 100% 63% / 1),
0 0 0.2em hsl(37 100% 62% / 1), 0 0 0.6em hsl(33 100% 58% / 1),
0 0 0.8em hsl(30 100% 54% / 1);
}
}
.glow {
position: relative;
display: block;
font: 38px proxima-nova-wide, sans-serif;
font-weight: 300;
letter-spacing: 1px;
text-decoration: none;
color: hsl(60 100% 71% / 1);
transition: text-shadow 0.5s ease, color 0.3s ease;
animation: glowingText 10s linear infinite;
}
</style>
</head>
<body style="background: #000000;">
<h1 class="glow">Glowing Text Effect</h1>
</body>
</html>
@AntiMoron
Copy link
Author

AntiMoron commented Aug 21, 2023 •
edited

I was wandering around some shopify stores, found some shop using glowing text. I make this code snnipet for furthure reference.

Here's the output:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment