CSS Split text with shadow

Best way to show the text in beautiful shadow and with splitted text. Split text created using HTML (Pug) and CSS (Stylus). Clean code and can be used as a logo too 🙂

Code developed by naomochi and Created on November 27, 2019, Updated on November 27, 2019.

Find the demo below

See the Pen shadowbringers by naomochi (@naomochi) on CodePen.

Find the code below

HTML

Pug
View Compiled HTML
Pug

.wrap
  .logo.i: span.inner: span.gr W3T
  .logo.ii: span.inner: span.gr TWEAKS

View Compiled HTML

<div class="wrap">
  <div class="logo i"><span class="inner"><span class="gr">W3T</span></span></div>
  <div class="logo ii"><span class="inner"><span class="gr">TWEAKS</span></span></div>
</div>

CSS

Stylus
View Compiled CSS
Stylus

@import url('https://fonts.googleapis.com/css?family=Average&display=swap');
body
  font-size 0
  font-family 'Average', serif
  background #222
.wrap
  display flex
  align-items center
  justify-content center
  height 100vh
.logo
  font-size 7vw
  letter-spacing -0.05em
  overflow hidden
  height 5em
  line-height 5em
  transform rotate(30deg)
  position relative
.i
  display inline-block
  z-index 2
  .inner
    margin-right -0.25em
  .gr
    background linear-gradient(90deg,rgba(160, 130, 80, 1) 0%,rgba(200, 170, 100, 1) 80%)
    -webkit-text-fill-color transparent
    -webkit-background-clip text
.ii
  display inline-block
  margin-left .55em
  margin-top .2em
  .inner
    margin 0 -0.4em 0 -0.6em
  .gr
    background linear-gradient(90deg,rgba(200, 170, 100, 1) 0%,rgba(240, 210, 130, 1) 20%,rgba(160, 130, 80, 1) 100%)
    -webkit-text-fill-color transparent
    -webkit-background-clip text
.inner
  display block
  transform rotate(-30deg)
  color #f8db89

View Compiled CSS

@import url("https://fonts.googleapis.com/css?family=Average&display=swap");
body {
  font-size: 0;
  font-family: 'Average', serif;
  background: #222;
}
.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.logo {
  font-size: 7vw;
  letter-spacing: -0.05em;
  overflow: hidden;
  height: 5em;
  line-height: 5em;
  transform: rotate(30deg);
  position: relative;
}
.i {
  display: inline-block;
  z-index: 2;
}
.i .inner {
  margin-right: -0.25em;
}
.i .gr {
  background: linear-gradient(90deg, #a08250 0%, #c8aa64 80%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.ii {
  display: inline-block;
  margin-left: 0.55em;
  margin-top: 0.2em;
}
.ii .inner {
  margin: 0 -0.4em 0 -0.6em;
}
.ii .gr {
  background: linear-gradient(90deg, #c8aa64 0%, #f0d282 20%, #a08250 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.inner {
  display: block;
  transform: rotate(-30deg);
  color: #f8db89;
}