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

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

30 January 2025

आइकन और टेक्स्ट के साथ एचटीएमएल लाइट बटन

HTML

<!DOCTYPE html>
<html lang="fr">

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

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

अनुशंसित

बटन ग्रेडिएंट होवर

निऑन चमक प्रभाव

आइकन और टेक्स्ट के साथ एचटीएमएल लाइट बटन

HTML

CSS

JS

अनुशंसित

बटन ग्रेडिएंट होवर

निऑन चमक प्रभाव

आइकन और टेक्स्ट के साथ एचटीएमएल लाइट बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS