10+ CSS 3D Text Effect Examples

This post contains a total of 10+ CSS 3D Text Effect Examples with Source Code. All these 3D Text Effects are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS 3D Text Effect Examples

1. CSS 3D Text Effect

Made by Kyle Wetton. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
body,
html {
  background: radial-gradient(circle, #fffc00 0%, #f0ed17 100%);
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Luckiest Guy", cursive;
}

h1 {
  margin: 0;
  font-size: 8em;
  padding: 0;
  color: white;
  text-shadow: 0 0.1em 20px black, 0.05em -0.03em 0 black, 0.05em 0.005em 0 black, 0em 0.08em 0 black, 0.05em 0.08em 0 black, 0px -0.03em 0 black, -0.03em -0.03em 0 black, -0.03em 0.08em 0 black, -0.03em 0 0 black;
}
h1 span {
  transform: scale(0.9);
  display: inline-block;
}
h1 span:first-child {
  -webkit-animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
          animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
h1 span:last-child {
  -webkit-animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
          animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}

@-webkit-keyframes bop {
  0% {
    transform: scale(0.9);
  }
  50%, 100% {
    transform: scale(1);
  }
}

@keyframes bop {
  0% {
    transform: scale(0.9);
  }
  50%, 100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bopB {
  0% {
    transform: scale(0.9);
  }
  80%, 100% {
    transform: scale(1) rotateZ(-3deg);
  }
}
@keyframes bopB {
  0% {
    transform: scale(0.9);
  }
  80%, 100% {
    transform: scale(1) rotateZ(-3deg);
  }
}
</style>
</head>
<body>
  <h1><span>"BIG</span><span>YIKES"</span></h1>
</body>
</html>

2. 3D Text

Made by Jacob Swift. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html {
  font-family: Verdana, Helvetica, Arial;
  background-color: #3ADBBC;
}

.wrapper {
  text-align: center;
  margin: 2.5% auto;
  min-width: 800px;
  width:75%;
}

.wrapper h1 {
  color: #1abc9c;
  font-size: 10em;
  font-weight: bold;
  text-shadow: #1abc9c 0 0 1px, 
               #19B394 0 4px 3px, 
               #1AAD90 0 9px 3px,  
               #16a085 0 12px 1px, 
               rgba(0,0,0,0.2) 0 14px 3px, 
               rgba(0,0,0,0.1) 0 20px 10px,
               rgba(0,0,0,0.2) 0 15px 80px;
  
  transition: all 1s ease;
}

.wrapper h1:hover {
  color: #fff;
  text-shadow: #fff 0 0 1px, 
               #eee 0 4px 3px, 
               #ddd 0 9px 3px,  
               #ccc 0 12px 1px, 
               rgba(0,0,0,0.2) 1px 14px 3px, 
               rgba(0,0,0,0.2) 2px 20px 10px,
               rgba(0,0,100,0.3) 2px 15px 90px;
}
</style>
</head>
<body>
  <div class="wrapper">
  <h1>BEYOND.</p>
</div>
</body>
</html>

3. HEY CSS 3D Text Animation

Made by Radu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://use.typekit.net/mtw8akb.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --color-primary: #f6aca2;
  --color-secondary: #f49b90;
  --color-tertiary: #f28b7d;
  --color-quaternary: #f07a6a;
  --color-quinary: #ee6352;
  /*
  --color-primary: #5192ED;
  --color-secondary: #69A1F0;
  --color-tertiary: #7EAEF2;
  --color-quaternary: #90BAF5;
  --color-quinary: #A2C4F5;
  */
}

body {
  min-height: 100vh;
  font-family: canada-type-gibson, sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: #eff8e2;
}

.content {
  display: flex;
  align-content: center;
  justify-content: center;
}

.text_shadows {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  font-family: bungee, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(2rem + 5vw);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  -webkit-animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
          animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@-webkit-keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}
@-webkit-keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
</style>
</head>
<body>
  <div class="content">
  <h2 class="text_shadows">hey</h2>
</div>
</body>
</html>

4. Codevember

Made by John Garcia. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Alfa+Slab+One'> 
<style>
body {
  background: indianred;
}

.text {
  font-family: "Alfa Slab One", cursive;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
  width: 100%;
  text-align: center;
  perspective: 1000px;
}
.text p {
  color: palegoldenrod;
}
.text h1 {
  position: relative;
  font-size: 5em;
  color: palegoldenrod;
  letter-spacing: 0.0625em;
  animation: drop-shadows;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

@keyframes drop-shadows {
  0% {
    text-shadow: -1px 0 0 cadetblue, 0px 0 0 #5b989a, 0px 0 0 #5d9b9d, 0px 0 0 cadetblue;
  }
  25% {
    text-shadow: -1px 0 0 cadetblue, -2px 0 0 #5b989a, -3px 0 0 #599596, -4px 0 0 #579193, -5px 0 0 #568e90, -6px 0 0 #548b8d, -7px 0 0 #52888a, -8px 0 0 #508586, -9px 0 0 #4e8283, -10px 0 0 #4c7e80, -11px 0 0 #4a7b7d, -12px 0 0 #48787a, -13px 0 0 #467576, -14px 0 0 #447273, -15px 0 0 #436f70, -16px 0 0 #416b6d, -17px 0 0 #3f686a, -18px 0 0 #3d6566, -19px 0 0 #3b6263, -20px 0 0 #395f60, -21px 0 0 #375c5d, -22px 0 0 #35585a, -23px 0 0 #335556, -24px 0 0 #315253, -25px 0 0 #304f50, -26px 0 0 #2e4c4d, -27px 0 0 #2c494a, -28px 0 0 #2a4646, -29px 0 0 #284243, -30px 0 0 #263f40;
    transform: rotateY(25deg);
  }
  75% {
    text-shadow: -1px 0 0 cadetblue, 2px 0 0 #5b989a, 3px 0 0 #599596, 4px 0 0 #579193, 5px 0 0 #568e90, 6px 0 0 #548b8d, 7px 0 0 #52888a, 8px 0 0 #508586, 9px 0 0 #4e8283, 10px 0 0 #4c7e80, 11px 0 0 #4a7b7d, 12px 0 0 #48787a, 13px 0 0 #467576, 14px 0 0 #447273, 15px 0 0 #436f70, 16px 0 0 #416b6d, 17px 0 0 #3f686a, 18px 0 0 #3d6566, 19px 0 0 #3b6263, 20px 0 0 #395f60, 21px 0 0 #375c5d, 22px 0 0 #35585a, 23px 0 0 #335556, 24px 0 0 #315253, 25px 0 0 #304f50, 26px 0 0 #2e4c4d, 27px 0 0 #2c494a, 28px 0 0 #2a4646, 29px 0 0 #284243, 30px 0 0 #263f40;
    transform: rotateY(-25deg);
  }
  100% {
    text-shadow: -1px 0 0 cadetblue, 0px 0 0 #5b989a, 0px 0 0 #5d9b9d, 0px 0 0 cadetblue;
    transform: rotateY(0deg);
  }
}
</style>
</head>
<body>
  <div class="text">
  <h1>#CODEVEMBER</h1>
  <p>@johngarcia9110</p>
  <p>Codevemeber #01</p>
</div>
</body>
</html>

5. Pure CSS3 3D Text With Hover

Made by MayhemBliz. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
    color: #fff;
    text-align: center;
}

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
  font-size: 100px;
  font-family: Verdana, Geneva, sans-serif;
  letter-spacing: -15px;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #ccc;
}
</style>
</head>
<body>
  <h1><a href="#">Mayhem</a></h1>
</body>
</html>

6. SCSS 3D text mixin

Made by Liam Egan. Source

SCSS 3D text mixin
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Kanit:900");
body {
  background: #e6bebe;
}

h1 {
  color: #FFF;
  font-family: "Kanit";
  font-size: 60px;
  line-height: 1em;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-shadow: 0 1px 0 #dba1a1, 0 2px 0 #d89999, 0 3px 0 #d59292, 0 4px 0 #d28a8a, 0 5px 0 #cf8383, 0 6px 0 #cd7c7c, 0 7px 0 #ca7474, 0 8px 0 #c76d6d, 0 0 5px rgba(230, 139, 139, 0.05), 0 -1px 3px rgba(230, 139, 139, 0.2), 0 9px 9px rgba(230, 139, 139, 0.3), 0 12px 12px rgba(230, 139, 139, 0.3), 0 15px 15px rgba(230, 139, 139, 0.3);
}
</style>
</head>
<body>  <h1>I&nbsp;am&nbsp;a&nbsp;3D (not&nbsp;really, tho)&nbsp;heading</h1>
</body>
</html>

7. 3D Text Shadow CSS only

Made by Qub. Source

3D Text Shadow CSS only
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:[email protected]&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

p {
  font-family: "Fira Sans", sans-serif;
  font-size: 9em;
  line-height: 0.67em;
}

body {
  min-height: 100vh;
  background-color: white;
  font-size: 20px;
  perspective: 30em;
  perspective-origin: 50% calc(50% - 5em);
  overflow: hidden;
}

.ground {
  height: 40em;
  width: 40em;
  background-image: linear-gradient(#9991, #0008);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(90deg) rotateZ(45deg) translateZ(-3em) translateY(-2em);
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-box {
  display: flex;
}
.text-box .text-R p:nth-child(1) {
  transform-origin: bottom;
  transform: rotateX(-90deg) translateZ(0.67em) translateY(-2px);
  color: #a6a6a6;
  text-shadow: 1px -0.15px 0 #b5b5b5, 2px -0.3px 0 #b8b8b8, 3px -0.45px 0 #bababa, 4px -0.6px 0 #bdbdbd, 5px -0.75px 0 #bfbfbf, 6px -0.9px 0 #c2c2c2, 7px -1.05px 0 #c4c4c4, 8px -1.2px 0 #c7c7c7, 9px -1.35px 0 #c9c9c9, 10px -1.5px 0 #cccccc, 11px -1.65px 0 #cfcfcf, 12px -1.8px 0 #d1d1d1, 13px -1.95px 0 #d4d4d4, 14px -2.1px 0 #d6d6d6, 15px -2.25px 0 #d9d9d9, 16px -2.4px 0 #dbdbdb, 17px -2.55px 0 #dedede, 18px -2.7px 0 #e0e0e0, 19px -2.85px 0 #e3e3e3, 20px -3px 0 #e6e6e6, 21px -3.15px 0 #e8e8e8, 22px -3.3px 0 #ebebeb, 23px -3.45px 0 #ededed, 24px -3.6px 0 #f0f0f0, 25px -3.75px 0 #f2f2f2;
}
.text-box .text-R p:nth-child(2) {
  transform-origin: bottom;
  transform: rotateX(-90deg) translateX(5px) translateY(-2px) translateZ(-4px);
}
.text-box .text-R p:nth-child(2) path {
  stroke: #FF3B28;
  stroke-width: 0px;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: dash 2s linear forwards;
}
.text-box .text-R p:nth-child(3) {
  transform-origin: middle;
  transform: rotateX(180deg) scaleY(2.5) translateY(-20%);
  color: #b3b3b3;
  text-shadow: 0 0 5px gray;
  filter: blur(5px);
  box-shadow: 0px 1px 0px black;
}
.text-box .text-G p:nth-child(1) {
  transform-origin: bottom;
  transform: rotateX(-90deg) translateZ(0.67em) translateY(-2px);
  color: #a6a6a6;
  text-shadow: 1px -0.15px 0 #b5b5b5, 2px -0.3px 0 #b8b8b8, 3px -0.45px 0 #bababa, 4px -0.6px 0 #bdbdbd, 5px -0.75px 0 #bfbfbf, 6px -0.9px 0 #c2c2c2, 7px -1.05px 0 #c4c4c4, 8px -1.2px 0 #c7c7c7, 9px -1.35px 0 #c9c9c9, 10px -1.5px 0 #cccccc, 11px -1.65px 0 #cfcfcf, 12px -1.8px 0 #d1d1d1, 13px -1.95px 0 #d4d4d4, 14px -2.1px 0 #d6d6d6, 15px -2.25px 0 #d9d9d9, 16px -2.4px 0 #dbdbdb, 17px -2.55px 0 #dedede, 18px -2.7px 0 #e0e0e0, 19px -2.85px 0 #e3e3e3, 20px -3px 0 #e6e6e6, 21px -3.15px 0 #e8e8e8, 22px -3.3px 0 #ebebeb, 23px -3.45px 0 #ededed, 24px -3.6px 0 #f0f0f0, 25px -3.75px 0 #f2f2f2;
}
.text-box .text-G p:nth-child(2) {
  transform-origin: bottom;
  transform: rotateX(-90deg) translateX(5px) translateY(-2px) translateZ(-4px);
}
.text-box .text-G p:nth-child(2) path {
  stroke: #48EB12;
  stroke-width: 0px;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: dash 2s linear forwards;
}
.text-box .text-G p:nth-child(3) {
  transform-origin: middle;
  transform: rotateX(180deg) scaleY(2.5) translateY(-20%);
  color: #b3b3b3;
  text-shadow: 0 0 5px gray;
  filter: blur(5px);
  box-shadow: 0px 1px 0px black;
}
.text-box .text-B p:nth-child(1) {
  transform-origin: bottom;
  transform: rotateX(-90deg) translateZ(0.67em) translateY(-2px);
  color: #a6a6a6;
  text-shadow: 1px -0.15px 0 #b5b5b5, 2px -0.3px 0 #b8b8b8, 3px -0.45px 0 #bababa, 4px -0.6px 0 #bdbdbd, 5px -0.75px 0 #bfbfbf, 6px -0.9px 0 #c2c2c2, 7px -1.05px 0 #c4c4c4, 8px -1.2px 0 #c7c7c7, 9px -1.35px 0 #c9c9c9, 10px -1.5px 0 #cccccc, 11px -1.65px 0 #cfcfcf, 12px -1.8px 0 #d1d1d1, 13px -1.95px 0 #d4d4d4, 14px -2.1px 0 #d6d6d6, 15px -2.25px 0 #d9d9d9, 16px -2.4px 0 #dbdbdb, 17px -2.55px 0 #dedede, 18px -2.7px 0 #e0e0e0, 19px -2.85px 0 #e3e3e3, 20px -3px 0 #e6e6e6, 21px -3.15px 0 #e8e8e8, 22px -3.3px 0 #ebebeb, 23px -3.45px 0 #ededed, 24px -3.6px 0 #f0f0f0, 25px -3.75px 0 #f2f2f2;
}
.text-box .text-B p:nth-child(2) {
  transform-origin: bottom;
  transform: rotateX(-90deg) translateX(5px) translateY(-2px) translateZ(-4px);
}
.text-box .text-B p:nth-child(2) path {
  stroke: #00A7FA;
  stroke-width: 0px;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: dash 2s linear forwards;
}
.text-box .text-B p:nth-child(3) {
  transform-origin: middle;
  transform: rotateX(180deg) scaleY(2.5) translateY(-20%);
  color: #b3b3b3;
  text-shadow: 0 0 5px gray;
  filter: blur(5px);
  box-shadow: 0px 1px 0px black;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
</head>
<body>
  <div class="ground">
  <div class="text-box">
    <div class="div text-R">
      <p>R</p>
      <p><svg width="99.9" height="124.741" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 66.6 124.741 L 41.04 77.041 L 29.52 77.041 L 29.52 124.741 L 0 124.741 L 0 0.001 L 40.86 0.001 Q 56.592 0.001 67.516 3.547 A 41.807 41.807 0 0 1 79.29 9.361 A 30.185 30.185 0 0 1 91.252 28.448 A 47.337 47.337 0 0 1 92.16 37.981 A 41.612 41.612 0 0 1 91.21 47.109 A 29.634 29.634 0 0 1 86.4 58.051 Q 80.64 66.061 68.22 71.641 L 99.9 124.741 L 66.6 124.741 Z M 29.52 20.701 L 29.52 56.701 L 41.94 56.701 A 34.844 34.844 0 0 0 47.382 56.305 Q 53.31 55.365 56.79 52.201 A 13.76 13.76 0 0 0 60.464 46.507 Q 61.261 44.263 61.56 41.494 A 32.742 32.742 0 0 0 61.74 37.981 A 24.096 24.096 0 0 0 61.272 33.066 Q 60.657 30.118 59.235 27.91 A 12.335 12.335 0 0 0 56.43 24.841 A 16.636 16.636 0 0 0 51.534 22.278 Q 47.061 20.75 40.561 20.703 A 57.379 57.379 0 0 0 40.14 20.701 L 29.52 20.701 Z" vector-effect="non-scaling-stroke"/></g></svg></p>
      <p>R</p>
    </div>
    <div class="div text-G">
      <p>G</p>
      <p><svg width="102.061" height="130.874" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 101.341 15.311 L 86.401 30.971 A 72.363 72.363 0 0 0 81.545 27.583 Q 78.966 25.945 76.553 24.777 A 37.042 37.042 0 0 0 74.071 23.681 A 31.071 31.071 0 0 0 67.151 21.862 A 41.757 41.757 0 0 0 61.021 21.431 A 28.372 28.372 0 0 0 49.784 23.591 Q 43.671 26.197 39.17 31.947 A 33.59 33.59 0 0 0 38.881 32.321 A 34.556 34.556 0 0 0 33.755 42.307 Q 30.7 51.394 30.604 64.501 A 116.675 116.675 0 0 0 30.601 65.351 A 145.123 145.123 0 0 0 30.995 76.449 Q 32.176 91.789 36.901 99.281 A 20.502 20.502 0 0 0 51.773 108.92 A 30.791 30.791 0 0 0 56.521 109.271 A 36.486 36.486 0 0 0 67.518 107.654 A 32.725 32.725 0 0 0 73.441 105.131 L 73.441 76.871 L 57.241 76.871 L 54.361 55.991 L 102.061 55.991 L 102.061 117.731 Q 92.341 124.031 80.641 127.451 Q 68.941 130.871 57.241 130.871 A 77.193 77.193 0 0 1 40.462 129.163 Q 29.656 126.756 21.709 120.957 A 43.677 43.677 0 0 1 14.401 114.221 Q 3.077 101.128 0.658 78.406 A 123.462 123.462 0 0 1 0.001 65.351 A 90.115 90.115 0 0 1 1.5 48.499 A 65.004 65.004 0 0 1 7.831 30.071 Q 15.661 15.311 29.251 7.661 A 60.005 60.005 0 0 1 55.583 0.131 A 72.219 72.219 0 0 1 59.761 0.011 Q 83.881 0.011 101.341 15.311 Z" vector-effect="non-scaling-stroke"/></g></svg></p>
      <p>G</p>
    </div>
    <div class="div text-B">
      <p>B</p>
      <p><svg width="94.502" height="124.742" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 40.14 124.741 L 0 124.741 L 0 0.001 L 35.28 0.001 A 149.009 149.009 0 0 1 49.789 0.659 Q 64.488 2.102 73.93 6.707 A 41.282 41.282 0 0 1 75.42 7.471 A 26.022 26.022 0 0 1 84.833 15.725 Q 88.168 20.639 89.002 27.259 A 36.825 36.825 0 0 1 89.28 31.861 A 29.826 29.826 0 0 1 88.277 39.794 A 22.276 22.276 0 0 1 82.71 49.591 Q 76.14 56.341 66.42 58.681 Q 78.84 61.021 86.67 67.861 A 21.688 21.688 0 0 1 93.208 78.395 Q 94.258 81.993 94.455 86.336 A 45.157 45.157 0 0 1 94.5 88.381 A 43.346 43.346 0 0 1 93.239 99.205 A 26.867 26.867 0 0 1 80.19 116.551 A 53.162 53.162 0 0 1 67.85 121.542 Q 56.227 124.741 40.14 124.741 Z M 42.48 69.481 L 29.52 69.481 L 29.52 103.321 L 40.32 103.321 Q 51.433 103.321 57.43 100.154 A 17.12 17.12 0 0 0 58.05 99.811 A 11.295 11.295 0 0 0 63.16 93.294 Q 63.836 91.233 64.015 88.676 A 27.361 27.361 0 0 0 64.08 86.761 Q 64.08 71.174 46.505 69.647 A 46.559 46.559 0 0 0 42.48 69.481 Z M 38.16 20.881 L 29.52 20.881 L 29.52 49.861 L 40.5 49.861 A 34.033 34.033 0 0 0 47.333 49.237 Q 57.805 47.081 59.052 37.473 A 21.244 21.244 0 0 0 59.22 34.741 Q 59.22 29.279 56.59 26.119 A 10.01 10.01 0 0 0 54.18 24.031 Q 49.14 20.881 38.16 20.881 Z" vector-effect="non-scaling-stroke"/></g></svg></p>
      <p>B</p>
    </div>
  </div>
</div>
</body>
</html>

8. Gradient 3D text

Made by Make. Source

Gradient 3D text
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
		background-color: #272727;
	}

	h1 {
        font-family: "Arial", sans-serif;
        font-size: 85px;
        text-align: center;
        font-weight: bold;
    	color: #3d3d3d;
    	margin-top: 200px;
    }

    .text {
        position:relative;
    }
    .text:after {
        content: '';
        position:absolute;
        display:block;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background: -moz-linear-gradient(top,  rgba(39,39,39,1) 0%, rgba(39,39,39,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,39,39,1)), color-stop(100%,rgba(39,39,39,0)));
background: -webkit-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
background: -o-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
background: -ms-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
background: linear-gradient(to bottom,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#00272727',GradientType=0 );

    }

    span {
    	  text-shadow: 
    	  	0 -1px 0 #858585,
              
               
               0 1px 10px rgba(0,0,0,.6),
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.2),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 7px 10px rgba(0,0,0,.25),
               0 15px 10px rgba(0,0,0,.2),
               0 25px 15px rgba(0,0,0,.15);
    }
</style>
</head>
<body>
  <h1 class="text"><span>Gradient 3D text</span></h1>
</body>
</html>

9. 3D CSS Text

Made by Eric Sadowski. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  background-color: #444;
}
div {
  width: 600px;
  height: 100px;
  margin: 100px auto;
  perspective: 1000px;
  perspective-origin: 50% -200px;
}
h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 3em;
  letter-spacing: 0.1em;
  color: #EEE;
  animation: rotate 2s ease-in-out alternate infinite;
}
h1:before {
  content: attr(data-shadow);
  color: transparent;
  text-shadow: 0 0 15px #111;
  position: absolute;
  z-index: -1;
  margin: -0.1em 0 0 0;
  animation: skew 2s ease-in-out alternate infinite;
  transform-origin: bottom;
}
@keyframes rotate {
  from {
    transform: rotateY(-10deg);
    text-shadow:  1px -1px #CCC,
                  2px -1px #BBB,
                  3px -2px #AAA,
                  4px -2px #999,
                  5px -3px #888,
                  6px -3px #777;
  }
  to {
    transform: rotateY(10deg);
    text-shadow:  -1px -1px #CCC,
                  -2px -1px #BBB,
                  -3px -2px #AAA,
                  -4px -2px #999,
                  -5px -3px #888,
                  -6px -3px #777;
  }
}
@keyframes skew {
  from {
    transform: scaleY(0.3) skewX(-15deg);
  }
  to {
    transform: scaleY(0.3) skewX(-20deg);
  }
}
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #DDD;
  padding: 5px 10px;
  margin: 5px;
}
</style>
</head>
<body>
  <div>
  <h1 data-shadow="CSS 3D Lettering">
    CSS 3D Lettering
  </h1>
</div>
<footer>
  An original pen by <a href="https://codepen.io/ejsado/">Eric</a>.
</footer>
</body>
</html>

10. 404 Animated Text

Made by Vincent Van Goggles. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Pacifico&text=Pure");
@import url("//fonts.googleapis.com/css?family=Roboto:700&text=css");
@import url("//fonts.googleapis.com/css?family=Kaushan+Script&text=!");
body {
  min-height: 450px;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
}

.stage {
  height: 300px;
  width: 500px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 9999px;
  transform-style: preserve-3d;
}

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: เฒ _เฒ  5s infinite alternate ease-in-out -7.5s;
  animation-fill-mode: forwards;
  transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}

.layer:after {
  font: 150px/0.65 "Pacifico", "Kaushan Script", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
  content: "404  :( \a   Page not\a Found";
  white-space: pre;
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50px;
  color: whitesmoke;
  letter-spacing: -2px;
  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}

.layer:nth-child(1):after {
  transform: translateZ(0px);
}

.layer:nth-child(2):after {
  transform: translateZ(-1.5px);
}

.layer:nth-child(3):after {
  transform: translateZ(-3px);
}

.layer:nth-child(4):after {
  transform: translateZ(-4.5px);
}

.layer:nth-child(5):after {
  transform: translateZ(-6px);
}

.layer:nth-child(6):after {
  transform: translateZ(-7.5px);
}

.layer:nth-child(7):after {
  transform: translateZ(-9px);
}

.layer:nth-child(8):after {
  transform: translateZ(-10.5px);
}

.layer:nth-child(9):after {
  transform: translateZ(-12px);
}

.layer:nth-child(10):after {
  transform: translateZ(-13.5px);
}

.layer:nth-child(11):after {
  transform: translateZ(-15px);
}

.layer:nth-child(12):after {
  transform: translateZ(-16.5px);
}

.layer:nth-child(13):after {
  transform: translateZ(-18px);
}

.layer:nth-child(14):after {
  transform: translateZ(-19.5px);
}

.layer:nth-child(15):after {
  transform: translateZ(-21px);
}

.layer:nth-child(16):after {
  transform: translateZ(-22.5px);
}

.layer:nth-child(17):after {
  transform: translateZ(-24px);
}

.layer:nth-child(18):after {
  transform: translateZ(-25.5px);
}

.layer:nth-child(19):after {
  transform: translateZ(-27px);
}

.layer:nth-child(20):after {
  transform: translateZ(-28.5px);
}

.layer:nth-child(n+10):after {
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
  -webkit-text-stroke: 15px dodgerblue;
  text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}

.layer:nth-child(n+12):after {
  -webkit-text-stroke: 15px #0077ea;
}

.layer:last-child:after {
  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after {
  color: #fff;
  text-shadow: none;
}

@keyframes เฒ _เฒ  {
  100% {
    transform: rotateY(-40deg) rotateX(-43deg);
  }
}
</style>
</head>
<body>
  <div class="stage">
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>
</body>
</html>

11. Skewed and Rotated Text

Made by Paul Grant. Source

Skewed and Rotated Text
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Sarpanch:900");
body {
  display: grid;
  grid-template-areas: ". . ." ". text ." ". . .";
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
  background-image: radial-gradient(circle, #333333, #222222);
}

h1 {
  transform: skew(-12deg) rotate(-12deg);
  grid-area: text;
  font-family: "Sarpanch", sans-serif;
  font-size: 20vmin;
  margin: 0;
  padding: 30px;
  color: #1d9099;
  text-shadow: 1vmin 1vmin 0 #E79C10, -1vmin -1vmin 0 #D53A33;
}
</style>
</head>
<body>
  <h1>CHECK THIS OUT!</h1>
</body>
</html>