JSFiddle - React, Tailwind, and code Playground

by Getulio Ferreira

HTML

<h1><span>2018</span></h1>
<h1><span class="x">2018</span></h1>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(31, 32, 34);
}

h1 {
  font-family: sans-serif;
  text-align: center;
  font-size: 20vw;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  color: transparent;
  background-image: radial-gradient(#0ff 0%, #0f0 25%, #ff0 50%, #f0f, #00f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 115% 80%;
  -webkit-text-stroke: 4px transparent;  
}

.x::before {
  color: black;
  text-shadow: 0 .035em .035em rgba(0, 0, 0, 0.75);
  filter: none;
}

.x {
 filter: blur(60px);
 position: relative;
 top: -250px;
}