निऑन ग्रेडिएंट टेक्स्ट

अनुशंसित

23 September 2023

ग्रेडिएंट पृष्ठभूमि के साथ CSS कार्ड लेआउट

21 June 2024

<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>

निऑन ग्रेडिएंट टेक्स्ट

अनुशंसित

ग्लोइंग होवर टेक्स्ट

ग्रेडिएंट पृष्ठभूमि के साथ CSS कार्ड लेआउट

निऑन टॉगल स्विच

HTML

CSS

JS

अनुशंसित

ग्लोइंग होवर टेक्स्ट

ग्रेडिएंट पृष्ठभूमि के साथ CSS कार्ड लेआउट

निऑन टॉगल स्विच

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS