<p data-text=Away>Away</p>
See similar pens at <a href=https://codepen.io/nokiss/pens/popular target=_blank>Codepen</a>
<br> More text effects at <a href=http://users.atw.hu/nyejani/gallery/gallery.htm target=_blank>nokiss</a>
:root {
  --3DshadowA3: 0 0 1px rgba(0, 0, 0, .7), -1px 0 1px rgba(0, 0, 0, .4), 1px -1px 1px, 0 -1px 1px, -1px -1px 1px, 1px -1px 1px rgba(0, 0, 0, .5), -2px -1px 1px rgba(0, 0, 0, .5), 0 -2px 1px, -1px -2px 1px, -2px -2px 1px, 0 -2px 1px rgba(0, 0, 0, .5), -3px -2px 1px rgba(0, 0, 0, .5), -1px -3px 1px, -2px -3px 1px, -3px -3px 1px, -1px -3px 1px rgba(0, 0, 0, .5), -4px -3px 1px rgba(0, 0, 0, .5), -2px -4px 1px, -3px -4px 1px, -4px -4px 1px, -2px -4px 1px rgba(0, 0, 0, .5), -5px -4px 1px rgba(0, 0, 0, .5), -3px -5px 1px, -4px -5px 1px, -5px -5px 1px, -3px -5px 1px rgba(0, 0, 0, .5), -5px -5px 1px rgba(0, 0, 0, .7);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  background: #ddd;
  padding: 1em
}

p {
  position: relative;
  font-style: italic;
  font-size: 8rem;
  text-align: center;
  transform-origin: bottom left;
  transform: skewY(-15deg)translate3d(0, 0, 0);
  margin-top: 1.8em;
  color: #fff;
  text-shadow: var(--3DshadowA3);
  filter: brightness(.9)contrast(2)
}

p:before,
p:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  content: attr(data-text)
}

p:before {
  color: transparent;
  text-shadow: 0 0 5px #000, 0 0 10px rgba(0, 0, 0, .8), 0 0 20px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, .4);
  opacity: .4;
  transform-origin: bottom left;
  transform: skewX(60deg);
  z-index: -1
}

p:after {
  color: #fff;
  text-shadow: 0 0 .7px, 0 0 1.1px, 0 0 1.1px
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.