<svg xmlns="http://www.w3.org/2000/svg" id="svg-background" class="hide">
	<defs>
		<linearGradient id="grad-bg" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:#ee44ee; stop-opacity:1"/>
			<stop offset="100%" style="stop-color:#44eeee; stop-opacity:1"/>
		</linearGradient>
	</defs>
	<rect width="100%" height="100%" stroke="none" fill="url(#grad-bg)"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" id="svg-border" class="hide">
	<defs>
		<linearGradient id="grad-border" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:#ee44ee; stop-opacity:1"/>
			<stop offset="100%" style="stop-color:#44eeee; stop-opacity:1"/>
		</linearGradient>
	</defs>
	<rect width="100%" height="100%" stroke="url(#grad-border)" fill="none" stroke-width="8px"/>
</svg>

<table>
	<colgroup>
		<col class="col-title"/>
		<col/>
		<col/>
	</colgroup>
	<caption>
		Gradients
	</caption>
	<thead>
		<tr>
			<th></th>
			<th>CSS</th>
			<th>SVG</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Background</th>
			<td><div class="css-gradient-bg"></div></td>
			<td><div class="svg-gradient-bg"></div></td>
		</tr>
		<tr>
			<th>Border</th>
			<td><div class="css-gradient-border"></div></td>
			<td><div class="svg-gradient-border"></div></td>
		</tr>
		<tr>
			<th>Text</th>
			<td>
				<span class="css-gradient-text">
					gradient
				</span>
			</td>
			<td>
				<span class="svg-gradient-text" data-start-color="#ee44ee" data-stop-color="#44eeee" data-direction="right">
					gradient
				</span>
			</td>
		</tr>
	</tbody>
</table>
$bg: #1d1f20;
$fg: #dddddd;
$border: #888888;

$grad-start: #ee44ee;
$grad-end: #44eeee;
$grad-fallback: #ee4444;
$grad-direction: right;

$browser-prefixes: (webkit, moz, o);

@mixin prefix-values($declarations, $prefixes: $browser-prefixes) {
	@each $property, $value in $declarations {
		@each $prefix in $prefixes {
			#{$property}: #{'-' + $prefix + '-' + $value};
		}
		#{$property}: $value;
	}
}

@mixin prefix-all($declarations, $prefixes: $browser-prefixes) {
	@each $property, $value in $declarations {
		@each $prefix in $prefixes {
			#{'-' + $prefix + '-' + $property}: #{'-' + $prefix + '-' + $value};
		}
		#{$property}: $value;
	}
}

@mixin gradient-border($from, $to, $fallback, $direction: bottom) {
	border-color: $fallback;
	@include prefix-all(
		(border-image: linear-gradient(to $direction, $from, $to) 1 1%)
	);
}

@mixin gradient-bg($from, $to, $fallback, $direction: bottom) {
	background-color: $fallback;
	@include prefix-values(
		(background-image: linear-gradient(to $direction, $from, $to))
	);
}

.css-gradient-bg {
	@include gradient-bg(
		$grad-start, $grad-end,
		$grad-fallback, $grad-direction
	);
}

.svg-gradient-bg {
	/*background: url("background.svg");*/
}

.css-gradient-border {
	border-width: 4px;
	border-style: solid;
	@include gradient-border(
		$grad-start, $grad-end,
		$grad-fallback, $grad-direction
	);
}

.svg-gradient-border {
	position: relative;
	padding: 4px;
	&::before {
		display: block;
		content: "";
		/* background: url("border.svg"); */
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
}

.gradient-text {
	text-transform: uppercase;
	font-size: 125%;
	font-weight: bold;
}

.css-gradient-text {
	@extend .css-gradient-bg;
	@extend .gradient-text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.svg-gradient-text {
	@extend .gradient-text;
	svg {
		display: inline;
	}
}

.hide {
	display: none;
}

body {
  background-color: $bg;
	color: $fg;
}

table {
	min-width: 100%;
	border-collapse: collapse;
	col {
		min-width: 8em;
		width: 45%;
		&.col-title {
			width: 10%;
		}
	}
	caption {
		font-weight: bold;
		font-size: 150%;
		margin-bottom: 1em;
	}
	&, th, td {
		padding: 1em;
		border-bottom: 1px solid $border;
	}
	th {
		text-align: center;
		tbody & {
			text-align: left;
		}
	}
	td {
		text-align: center;
		vertical-align: middle;
		div {
			&, span {
				min-width: 2em;
			}
			height: 2em;
		}
	}
}
View Compiled
function svgToUrl(id) {
	var el = document.getElementById(id);
	var svg = '<svg xmlns="http://www.w3.org/2000/svg">'.concat(
		el.innerHTML, '</svg>'
	);
	return 'url("data:image/svg+xml; utf8,'.concat(
		window.encodeURIComponent(svg), '")'
	);
}

function svgElement(tag, attr) {
	var ret = document.createElementNS('http://www.w3.org/2000/svg', tag);
	if(attr) {
		for(var name in attr) {
			ret.setAttribute(name, attr[name]);
		}
	}
	return ret;
}

var svgGradientText = (function() {
	var id = 0;

	return function(el) {
		var gradAttr = {
			id: 'text-gradient-' + id++,
			x1: '0%', x2: '0%',
			y1: '0%', y2: '0%'
		}

		var startColor = el.getAttribute('data-start-color');
		var stopColor = el.getAttribute('data-stop-color');
		var direction = el.getAttribute('data-direction');
		var textContent = el.textContent.trim();

		switch(direction) {
			case 'left':
				gradAttr.x1 = '100%';
				break;
			case 'right':
				gradAttr.x2 = '100%';
				break;
			case 'top':
				gradAttr.y1 = '100%';
				break;
			default:
				gradAttr.y2 = '100%';
		}

		var svg = svgElement('svg');
		var title = svgElement('title');
		var defs = svgElement('defs');
		var grad = svgElement('linearGradient', gradAttr);
		var text = svgElement('text', {
			dy: '1em',
			fill: 'url(#'.concat(gradAttr.id, ')')
		});

		text.textContent = title.textContent = textContent;

		grad.appendChild(svgElement('stop', {
			offset: '0%',
			style: 'stop-color:'.concat(startColor, ';stop-opacity: 1')
		}));
		grad.appendChild(svgElement('stop', {
			offset: '100%',
			style: 'stop-color:'.concat(stopColor, ';stop-opacity: 1')
		}));

		defs.appendChild(grad);
		svg.appendChild(title);
		svg.appendChild(defs);
		svg.appendChild(text);
		el.innerHTML = '';
		el.appendChild(svg);

		var bbox = text.getBBox();
		svg.setAttribute('width', bbox.width);
		svg.setAttribute('height', bbox.height);
	}
})();

var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.textContent = ''.concat(
	'.svg-gradient-bg { background: ',
	svgToUrl('svg-background'),
	'} .svg-gradient-border::before { background: ',
	svgToUrl('svg-border'),
	'}'
);
document.head.appendChild(style);
document.querySelectorAll('.svg-gradient-text').forEach(svgGradientText);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/svg-innerhtml@1.1.0/svg-innerhtml.js