HTML
<svg viewBox="0 0 830 180">
<linearGradient id="gradient">
<stop offset="0" stop-color="gold"></stop>
<stop offset="30%" stop-color="red"></stop>
<stop offset="60%" stop-color="darkviolet"></stop>
<stop offset="100%" stop-color="deepskyblue"></stop>
</linearGradient>
<symbol id="text">
<text x="50%" y="50%"
dy=".35em"
text-anchor="middle"
>• Codepad •</text>
</symbol>
<mask id="mask-top">
<rect width="100%" height="50%"
x="0" y="0%"
fill="white"></rect>
</mask>
<mask id="mask-bottom">
<rect width="96%" height="96%"
x="2%" y="2%"
rx="20"
fill="white" stroke="#999"
stroke-width="5"></rect>
<rect width="100%" height="50%"
x="0" y="0%"
fill="black"></rect>
<use xlink:href="#text"
stroke="none"></use>
</mask>
<g fill="url(#gradient)"
stroke="url(#gradient)"
stroke-width="5">
<g mask="url(#mask-top)">
<rect width="96%" height="96%"
x="2%" y="2%"
rx="20"
fill="none"></rect>
<use xlink:href="#text"
fill="none" stroke-width="2"></use>
</g>
<g mask="url(#mask-bottom)">
<rect width="96%" height="96%"
x="2%" y="2%"
rx="20"></rect>
</g>
</g>
<use xlink:href="#text"
fill="transparent"
stroke="none"></use>
</svg>
SCSS
@import 'https://fonts.googleapis.com/css?family=Monoton';
BODY {
background: #FFF;
background-image: linear-gradient( #EEE 1px, transparent 2px), linear-gradient( to right, #EEE 1px, transparent 2px);
background-size: 1em 1em;
text-transform: uppercase;
}
svg {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
margin: auto;
font-size: 100px;
font-family: 'Monoton', cursive;
}
