1. Effects

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
.wrap
  .logo.i: span.inner: span.gr W3T
  .logo.ii: span.inner: span.gr TWEAKS
<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
@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
@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;
}
https://www.w3tweaks.com/
Do you like CV's articles? Follow on social!