DEV Community

Cover image for Gradient text for your website in 5 methods
Axorax
Axorax

Posted on

3 1 1 1 1

Gradient text for your website in 5 methods

In this article, I will show you a couple of ways to get gradient text using CSS (and some without CSS). You may already be familiar with one of the methods.

HTML for method - 1, 2 and 3

<h1>Sub to Axorax on YT!</h1>
Enter fullscreen mode Exit fullscreen mode

Method - 1 (CSS)

h1 {
  background: -webkit-linear-gradient(#e28bfc, #8bb8fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Method - 2 (CSS)

h1 {
  background: linear-gradient(#e28bfc, #8bb8fc);
  background-clip: text;
  color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Method - 3 (CSS clip-path)

h1 {
  position: relative;
  display: inline-block;
}

h1::before {
  content: "Sub to Axorax on YT!";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e28bfc, #8bb8fc);
  -webkit-background-clip: text;
  color: transparent;
  clip-path: text;
}
Enter fullscreen mode Exit fullscreen mode

Method - 4 (SVG)

<svg width="100%" height="100%">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#e28bfc;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8bb8fc;stop-opacity:1" />
    </linearGradient>
  </defs>
  <text x="10" y="50" font-size="72" fill="url(#gradient)">Gradient Text</text>
</svg>
Enter fullscreen mode Exit fullscreen mode

Method - 5 (HTML canvas)

<canvas id="canvas" width="800" height="200"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '3rem sans-serif';
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop(0, '#e28bfc');
  gradient.addColorStop(1, '#8bb8fc');
  ctx.fillStyle = gradient;
  ctx.fillText('Sub to Axorax on YT!', 10, 100);
</script>
Enter fullscreen mode Exit fullscreen mode

Hope you found something useful!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)