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

  .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>
@import url('https://fonts.googleapis.com/css?family=Average&display=swap');
  font-size 0
  font-family 'Average', serif
  background #222
  display flex
  align-items center
  justify-content center
  height 100vh
  font-size 7vw
  letter-spacing -0.05em
  overflow hidden
  height 5em
  line-height 5em
  transform rotate(30deg)
  position relative
  display inline-block
  z-index 2
    margin-right -0.25em
    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
  display inline-block
  margin-left .55em
  margin-top .2em
    margin 0 -0.4em 0 -0.6em
    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
  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;
Do you like CV's articles? Follow on social!