Gradient Stroke

CSS

/* Gradient Stroke — generated with TEXT-FX
 * HTML: the element needs a data-text attribute equal to its text.
 * Font: 'Recursive', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Recursive', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px hsl(235 96% 66%);
  paint-order: stroke fill;
}
.text-effect::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: 0;
  background: linear-gradient(135deg, hsl(143 95% 62%), hsl(198 95% 60%), hsl(273 92% 64%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<style>
.text-effect {
  font-family: 'Recursive', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px hsl(235 96% 66%);
  paint-order: stroke fill;
}
.text-effect::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: 0;
  background: linear-gradient(135deg, hsl(143 95% 62%), hsl(198 95% 60%), hsl(273 92% 64%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
</style>

<div data-text="Your text" class="text-effect">Your text</div>

Related Outline & Stroke effects

• Double Outline
• Filled Outline
• Outline