Neon Gradient Text

Open In Editor Publish Your Code

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Gradient Text</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #000;
      margin: 0;
    }

h1 {
      font-size: 5em;
      font-weight: bold;
      color: #fff;
      background: linear-gradient(90deg, #ff00cc, #3333ff, #00ffcc);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 15px rgba(255, 0, 255, 0.8),
        0 0 20px rgba(255, 0, 255, 0.8),
        0 0 25px rgba(255, 0, 255, 0.8),
        0 0 30px rgba(255, 0, 255, 0.8);
      animation: glow 1.5s infinite alternate;
    }

@keyframes glow {
      from {
        text-shadow: 0 0 10px #fff, 0 0 20px #ff00cc, 0 0 30px #ff00cc, 0 0 40px #ff00cc;
      }

to {
        text-shadow: 0 0 20px #fff, 0 0 30px #3333ff, 0 0 40px #00ffcc, 0 0 50px #ff00cc;
      }
    }
  </style>
</head>

<body>
  <h1>Neon Gradient Text</h1>
</body>

</html>

Neon Gradient Text

Recommended

On Scroll Text Animation

Stylish CSS Button with Animated Text and Icon

Gradient Color on Hover

HTML

CSS

JS

Recommended

On Scroll Text Animation

Stylish CSS Button with Animated Text and Icon

Gradient Color on Hover

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS