<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);
This Pen doesn't use any external CSS resources.