W3TWEAKS.COM
  • Home
  • Effects
    • Scroll Effects
    • Text Effects
  • Essentials
    • Arrows
    • Background Patterns
    • Cards
    • Color Palettes
    • Buttons
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Inputs
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • CMS
  • CSS & CSS3
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
No Result
View All Result
W3TWEAKS.COM
  • Home
  • Effects
    • Scroll Effects
    • Text Effects
  • Essentials
    • Arrows
    • Background Patterns
    • Cards
    • Color Palettes
    • Buttons
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Inputs
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • CMS
  • CSS & CSS3
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
No Result
View All Result
W3TWEAKS.COM
No Result
View All Result
ADVERTISEMENT
Home Effects

CSS Split text with shadow

by CV
November 29, 2019
in Effects
split text with shadow using css
ADVERTISEMENT

You might also like

Spotify wrapped Text effect

Spotify wrapped Text effect

December 10, 2019
All side scroll effects

All side scroll effects

December 3, 2019
3d Text effect using only css3

3d Text effect using only css3

November 29, 2019
Demo Image: CSS Card Hover Effects

CSS Card Hover Effects

October 15, 2019
Pure CSS3 3D Flip Card Effect

Pure CSS3 3D Flip Card Effect

September 25, 2019
Activate Button animation

Activate Button animation

September 25, 2019
ADVERTISEMENT

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;
}
Tags: text effectstext shadow effects
ADVERTISEMENT
CV

CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.

Related Posts

Spotify wrapped Text effect
Effects

Spotify wrapped Text effect

by CV
December 10, 2019
All side scroll effects
Effects

All side scroll effects

by CV
December 3, 2019
3d Text effect using only css3
Effects

3d Text effect using only css3

by CV
November 29, 2019
Demo Image: CSS Card Hover Effects
Effects

CSS Card Hover Effects

by CV
October 15, 2019
Pure CSS3 3D Flip Card Effect
Effects

Pure CSS3 3D Flip Card Effect

by CV
September 25, 2019
Load More
No Result
View All Result
ADVERTISEMENT

Tags

Angularjs (20) AngularJS Tutorials (16) animation (70) animation examples (15) beautiful (12) Button (24) button hover effect (15) Buttons (23) Calendar (37) calendars (37) cards (22) click animation (12) click buttons (19) CSS (126) css3 (20) css buttons (48) css calendar (36) css calendars (37) css effects (22) css hover effects (31) demo (18) effect (33) effects (41) essentials (48) free (12) Free Tool (13) hover (23) hover animation (31) hover button (12) Hover effects (40) html (86) inputs (15) Javascript (60) jquery (26) js (17) learn (12) loaders (13) mouse hover effects (36) pure (13) simple (13) text (12) text effects (17) tutorial (32) tutorials (13) YouTube (13)
  • Home Page
  • Request Demo/Tutorial

No Result
View All Result
  • Home
  • Effects
    • Scroll Effects
    • Text Effects
  • Essentials
    • Arrows
    • Background Patterns
    • Cards
    • Color Palettes
    • Buttons
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Inputs
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • CMS
  • CSS & CSS3
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders