7+ CSS Text Effect Examples

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

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

Related Posts

CSS Text Effect Examples

1. Refracted Floating Text Effect

Made by George W. Park. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #3f81b3 url(https://source.unsplash.com/DSwBHyWKiVw/1280x720) no-repeat center;
	background-size: cover;
    overflow: hidden;
}

h1 {
    position: relative;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: calc(10px + 10vw);
    font-weight: 700;
    color: #f5f5f5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    perspective: 500px;
}

h1::before,
h1::after {
    content: attr(aria-label);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    text-shadow: 0.01em 0.01em 0.01em rgba(0, 0, 0, 0.3);
}

h1::before {
    animation: floatAbove 3.5s ease-in-out infinite;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

h1::after {
    opacity: 0.65;
    filter: blur(0.02em);
    transform: translate(-50%, -50%) rotateX(21deg);
    animation: floatBelow 3.5s ease-in-out infinite;
    -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

@keyframes floatAbove {
    50% {
        transform: translate(-50%, -60%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
                clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
    }
}

@keyframes floatBelow {
    50% {
        transform: translate(-50%, -60%) rotateX(10deg);
        -webkit-clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
                clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
    }
}
</style>
</head>
<body>
  <h1 aria-label="refraction"></h1>
</body>
</html>

2. Skew text on hover

Made by delpher. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  background-color: #fb9;
  color: #aaa;
  font-size: 40px;
}

.text {
  display: flex;
  justify-content: center;
  margin-top: 50vh;
  transform: translateY(-50%);
  text-align: center;
  transition: transform 0.3s ease-in-out;
}
.text:hover {
  transform: rotateX(35deg), translateY(-50%);
}
.text:hover span {
  color: #ccc;
}
.text:hover span:nth-child(odd) {
  transform: skewY(15deg);
}
.text:hover span:nth-child(even) {
  transform: skewY(-15deg);
  background-color: #f9f9f9;
  color: #a6a6a6;
}
.text > span {
  display: block;
  background-color: #fff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  box-shadow: 0 40px 50px rgba(0, 0, 0, 0.1);
}
.text > span:first-child {
  border-radius: 5px 0 0 5px;
}
</style>
</head>
<body>
  <div class="text">
  <span>S</span>
  <span>K</span>
  <span>E</span>
  <span>W</span>
  <span></span>
  <span>T</span>
  <span>E</span>
  <span>X</span>
  <span>T</span>
</div>
</body>
</html>

3. Simple CSS Hover Effect using Sass Loops

Made by Charlie Marcotte. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
<style>
@import url("https://fonts.googleapis.com/css?family=Saira+Semi+Condensed");
body {
  background: #39393B;
  font-family: "Saira Semi Condensed", sans-serif;
}

.main-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
}

.first-container, .second-container {
  cursor: pointer;
  position: relative;
}
.first-container h1, .second-container h1 {
  position: relative;
  letter-spacing: 2px;
  font-size: 5vw;
}

.first-container {
  margin-bottom: 15px;
}

span {
  display: inline-block;
  position: relative;
  margin-right: 5px;
}
span:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  top: 0;
  left: 0;
  transition: 0.6s;
  z-index: -5;
}

.share:hover > h1 > span:nth-child(1):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 100ms;
  transform: rotate(-25deg);
}

.share:hover > h1 > span:nth-child(1) {
  color: #39393B;
  transition-delay: 110ms;
}

.share:hover > h1 > span:nth-child(2):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 200ms;
  transform: rotate(-20deg);
}

.share:hover > h1 > span:nth-child(2) {
  color: #39393B;
  transition-delay: 220ms;
}

.share:hover > h1 > span:nth-child(3):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 300ms;
  transform: rotate(-15deg);
}

.share:hover > h1 > span:nth-child(3) {
  color: #39393B;
  transition-delay: 330ms;
}

.share:hover > h1 > span:nth-child(4):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 400ms;
  transform: rotate(-10deg);
}

.share:hover > h1 > span:nth-child(4) {
  color: #39393B;
  transition-delay: 440ms;
}

.share:hover > h1 > span:nth-child(5):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 500ms;
  transform: rotate(-5deg);
}

.share:hover > h1 > span:nth-child(5) {
  color: #39393B;
  transition-delay: 550ms;
}

.share:hover > h1 > span:nth-child(6):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 600ms;
  transform: rotate(0deg);
}

.share:hover > h1 > span:nth-child(6) {
  color: #39393B;
  transition-delay: 660ms;
}

.share:hover > h1 > span:nth-child(7):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 700ms;
  transform: rotate(5deg);
}

.share:hover > h1 > span:nth-child(7) {
  color: #39393B;
  transition-delay: 770ms;
}

.share:hover > h1 > span:nth-child(8):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 800ms;
  transform: rotate(10deg);
}

.share:hover > h1 > span:nth-child(8) {
  color: #39393B;
  transition-delay: 880ms;
}

.share:hover > h1 > span:nth-child(9):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 900ms;
  transform: rotate(15deg);
}

.share:hover > h1 > span:nth-child(9) {
  color: #39393B;
  transition-delay: 990ms;
}

.share:hover > h1 > span:nth-child(10):after {
  background: white;
  width: 100%;
  transition: 0.6s;
  transition-delay: 1000ms;
  transform: rotate(20deg);
}

.share:hover > h1 > span:nth-child(10) {
  color: #39393B;
  transition-delay: 1100ms;
}
</style>
</head>
<body>
  <div class="main-container">
  <div class="first-container share">
    <h1><span id="one">W</span><span>h</span><span>e</span><span>n</span> <span>W</span><span>e</span> <span>T</span><span>a</span><span>l</span><span>k</span></h1>
  </div>
  <div class="second-container share">
    <h1><span>W</span><span>e</span> <span>M</span><span>o</span><span>v</span><span>e</span></h1>
  </div>
</div>
</body>
</html>

4. writing-mode

Made by writing-mode. Source

writing-mode
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html {
  font-family: "didot";
}

h2 {
  font-size: 100px;
  margin: 0;
   -ms-writing-mode: tb-lr;
       writing-mode: vertical-lr;
  text-align: center;
  line-height: .9;
}

.rotate {
   transform: rotate(180deg);
}

div {
  display: grid;
  height: 100vh;
  justify-content: center;
  align-content: center;
  grid-template-columns: -webkit-max-content -webkit-max-content;
  grid-template-columns: max-content max-content;
}

body {
  margin: 0;
}
</style>
</head>
<body>
  <div>
  <h2 class="rotate">Writing</h2>
  <h2>Mode</h2>
</div>
</body>
</html>

5. Typo triple

Made by creatz. Source

Typo triple
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:[email protected]&display=swap');

body{
  background:yellow;
	font-family: 'Raleway', sans-serif;
}

span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:120px;
	letter-spacing:0.1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: white;
  text-shadow: 
						8px 8px #ff1f8f,
						20px 20px #000000;
}
</style>
</head>
<body>
  <span>POP ART</span>
</body>
</html>

6. Custom multiline text underline with rounded caps

Made by Ash. Source

Custom multiline text underline with rounded caps
<!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>
/* Demo page styling: */

body {
  padding: 4rem;
}

.box {
  padding: 2rem;
  max-width: 14rem;
  background-color: #f2f2f2;
}

.box--wide {
  max-width: 50rem;
}

* {
  margin: 0;
  padding: 0;
}

* + * {
  margin-top: 2rem;
}

/* The good stuff: */

:root {
  /* The intrinsic width of the underline stroke (in pixels). This is 
   * the same as the height of the cap images. Don't specify the
   * units! This is because of some of the calculations we do later on. */
  --underline-intrinsic-width: 8;
  
  /* The actual width of the underline stroke we want to render (in pixels).
   * You can modify this, and the sizing and positioning should be calculated
   * accordingly. Again, Don't specify the units! */
  --underline-width: 12;
  
  /* The colour used to draw the underline. It should match the colour
   * used in the cap images... unfortunately we can't modify the SVG
   * fill via CSS because it's a background image. */
  --underline-color: #f1a1e3;
  
  /* We need to know the width of the cap images so that we
   * can position everything on the x axis accordingly. */
  --underline-cap-width: 4px;
  
  /* The border is positioned relative to the bottom of the line.
   * We can move it upwards a little to create an overlap effect. */
  --underline-offset-y: -2px;
  
  /* The padding to add to the x axis. By default, the caps would be
   * aligned with the beginning and end of the line. */
  --underline-padding-x: 0.12em;
  
  /* The cap images to use that form the left and right rounded
   * shape. I guess these could be any shape, they don't
   * necessarily have to be round πŸ™‚.
   */
  --cap-image-left: url(https://files-d4s40otz1.now.sh/left.svg);
  --cap-image-right: url(https://files-4vvqilj8v.now.sh/right.svg);
}
  
.heading {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background-repeat: no-repeat;
  color: #1221ff;
  background-image:
    linear-gradient(180deg, var(--underline-color), var(--underline-color)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
}

.heading--2 {
  --underline-width: 8;
  --underline-offset-y: -2px;
}

.heading--3 {
  font-size: 3rem;
  font-weight: bold;
  --underline-width: 20;
  --underline-offset-y: -2px;
  --cap-image-left: url(https://files-6lc03kjqt.now.sh/left-2.svg);
  --cap-image-right: url(https://files-e7gkh52mq.now.sh/right-2.svg);
}
</style>
</head>
<body>
  <div class='box'>
  <h1 class='heading'>The ringing in my ears is from another life.</h1>
</div>
<div class='box'>
   <h2 class='[  heading  heading--2  ]'>The world is quiet here.</h2>
</div>
<blockquote class='[  box  box--wide  ]'>
   <p class='[  heading  heading--3  ]'>I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology. Too often, the internet is cast as a wide-open, infinitely malleable material.</p>
  <footer>
    &mdash;<cite><a href='https://frankchimero.com/writing/the-webs-grain/'>Frank Chimero</a></cite>
  </footer>
</blockquote>
</body>
</html>

7. 3D letters – sugar sweet

Made by HΓ₯vard Brynjulfsen. Source

3D letters - sugar sweet
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
*, *:after, *:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #fbd7e3;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  color: #fcdde8;
  font-size: calc(1em + 20vw);
  font-weight: 900;
  text-shadow: -0.0075em 0.0075em 0 #fef2f6, 0.005em 0.005em 0 #f6a5c1, 0.01em 0.01em 0 #f7aac4, 0.015em 0.015em #f7aec7, 0.02em 0.02em 0 #f8b3ca, 0.025em 0.025em 0 #f8b7cd, 0.03em 0.03em 0 #f8bcd0, 0.035em 0.035em 0 #f9c0d3;
}
</style>
</head>
<body>
  <div class="container">
	<h1>Design</h1> 
</div>
</body>
</html>

8. Pinchy Type with CSS text-shadow

Made by Bennett Feely. Source

Pinchy Type with CSS text-shadow
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:100,100italic,300,300italic);
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: repeating-linear-gradient(45deg, transparent, transparent 2em, papayawhip 0, papayawhip 4em), repeating-linear-gradient(-45deg, transparent, transparent 2em, seashell 0, seashell 4em), snow;
  background-blend-mode: multiply;
}

h1 {
  text-shadow: 1px 1px #1e280a, 2px 2px #1e280a, 3px 3px #1e280a, 4px 4px #1e280a, 5px 5px #1e280a, 6px 6px #1e280a, 7px 7px #1e280a, 8px 8px #1e280a, 9px 9px #1e280a, 10px 10px #1e280a, 11px 11px #1e280a, 12px 12px #1e280a, 13px 13px #1e280a, 14px 14px #1e280a, 15px 15px #1e280a, -1px 1px olivedrab, -2px 2px olivedrab, -3px 3px olivedrab, -4px 4px olivedrab, -5px 5px olivedrab, -6px 6px olivedrab, -7px 7px olivedrab, -8px 8px olivedrab, -9px 9px olivedrab, -10px 10px olivedrab, -11px 11px olivedrab, -12px 12px olivedrab, -13px 13px olivedrab, -14px 14px olivedrab, -15px 15px olivedrab, -1px -1px #aed65a, -2px -2px #aed65a, -3px -3px #aed65a, -4px -4px #aed65a, -5px -5px #aed65a, -6px -6px #aed65a, -7px -7px #aed65a, -8px -8px #aed65a, -9px -9px #aed65a, -10px -10px #aed65a, -11px -11px #aed65a, -12px -12px #aed65a, -13px -13px #aed65a, -14px -14px #aed65a, -15px -15px #aed65a, 1px -1px olivedrab, 2px -2px olivedrab, 3px -3px olivedrab, 4px -4px olivedrab, 5px -5px olivedrab, 6px -6px olivedrab, 7px -7px olivedrab, 8px -8px olivedrab, 9px -9px olivedrab, 10px -10px olivedrab, 11px -11px olivedrab, 12px -12px olivedrab, 13px -13px olivedrab, 14px -14px olivedrab, 15px -15px olivedrab, 0 -1px black, 0 -2px black, 0 -3px black, 0 -4px black, 0 -5px black, 0 -6px black, 0 -7px black, 0 -8px black, 0 -9px black, 0 -10px black, 0 -11px black, 0 -12px black, 0 -13px black, 0 -14px black, 0 -15px black, 0 1px black, 0 2px black, 0 3px black, 0 4px black, 0 5px black, 0 6px black, 0 7px black, 0 8px black, 0 9px black, 0 10px black, 0 11px black, 0 12px black, 0 13px black, 0 14px black, 0 15px black, -1px 0 #aed65a, -2px 0 #aed65a, -3px 0 #aed65a, -4px 0 #aed65a, -5px 0 #aed65a, -6px 0 #aed65a, -7px 0 #aed65a, -8px 0 #aed65a, -9px 0 #aed65a, -10px 0 #aed65a, -11px 0 #aed65a, -12px 0 #aed65a, -13px 0 #aed65a, -14px 0 #aed65a, -15px 0 #aed65a, 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black, 6px 0 black, 7px 0 black, 8px 0 black, 9px 0 black, 10px 0 black, 11px 0 black, 12px 0 black, 13px 0 black, 14px 0 black, 15px 0 black;
  font: 100 150px/1 Alegreya Sans;
  letter-spacing: 20px;
  text-align: center;
  color: sienna;
}
</style>
</head>
<body>
  <h1>PINCHY<br>TEXT</h1>
</body>
</html>