Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style> 
text {
  font-size: 80px;
  font-weight: bold;
  paint-order: stroke fill;
}
</style>
</head>
<body>
<h1>The paint-order Property</h1>
<p>In this example stroke is done first, then fill. This makes stroke fall behind the fill, creating an outline for the characters.</p>
<svg width="100%" height="150">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ef5350;stop-opacity:1" />
      <stop offset="25%" style="stop-color:#7e57c2;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#26c6da;stop-opacity:1" />
      <stop offset="75%" style="stop-color:#eeff41;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#ff5722;stop-opacity:1" />
    </linearGradient>
  </defs>
  <text
    x="30" y="80"
    id="colorfulText"
    fill="url(#grad)"
    stroke="purple"
    stroke-width="10">
    I am colorful!
  </text>
</svg>