Gradient text

HTML

<script src="https://fonts.googleapis.com/css?family=Pacifico"></script>
<span class="fancy-text" contenteditable>Hello, world!</span>

CSS

.fancy-text {
  color: #0dd;

  background: -webkit-linear-gradient(left, #0cf, #0fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  font: 38px Pacifico, sans-serif;
  border-bottom: 4px solid rgba(255, 255, 255, 0.5);
  outline: none;
  padding: 0.2em;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #222630;
  
  display: flex;
  align-items: center;
  justify-content: center;
}