HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS background-clip text</title>

  <style>

    body {

      font-family: sans-serif;

      padding: 2rem;

      background: #0f172a;

      color: #e2e8f0;

    }

    .gradient-title {

      font-size: clamp(2rem, 8vw, 4rem);

      font-weight: 900;

      line-height: 1.1;

      margin: 0;

      background-image: linear-gradient(135deg, #38bdf8, #a855f7, #f472b6);

      background-clip: text;

      -webkit-background-clip: text;

      color: transparent;

    }

    p { max-width: 32rem; color: #94a3b8; }

  </style>

</head>

<body>

  <h1 class="gradient-title">Gradient Text</h1>

  <p>The gradient is clipped to the letter shapes using <code>background-clip: text</code>.</p>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS background-clip Property - text