Gradient text for your website in ethods-CSS Tutorial-php.cn

Gradient text for your website in ethods

WBOY

Release： 2024-07-26 08:08:03

Original

1022 people have browsed it

Gradient text for your website in ethods

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>

Copy after login

Method - 1 (CSS)

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

Copy after login

Method - 2 (CSS)

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

Copy after login

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

Copy after login

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>

Copy after login

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>

Copy after login

Hope you found something useful!

The above is the detailed content of Gradient text for your website in ethods. For more information, please follow other related articles on the PHP Chinese website!