18 Great CSS3 Text Effects You Can Copy/Paste

Here is a collection of 18 great CSS3 text effects to brighten up your typography which you can copy/paste into your designs.

By Tim Trott • HTML & CSS Tutorials • May 8, 2014
971 words, estimated reading time 3 minutes.
18 Great CSS3 Text Effects You Can Copy/Paste

Each of these effects makes use of the CSS3 text-shadow property to create unique effects. Each effect shows the CSS3 required, simply copy the code into the stylesheet CSS selector or use the F12 developer tools to inspect the demos below.

CSS Outlined Text

OUTLINED

css
.outlined {
  color: darkslategrey;
  text-shadow: 0px 0px 0.1px black, -0px 0px 0.1px black, -0px -0px 0.1px black, 0px -0px 0.1px black, 0px 1px 0.1px black, -0px 1px 0.1px black, -0px -1px 0.1px black, 0px -1px 0.1px black, 0px 2px 0.1px black, -0px 2px 0.1px black, -0px -2px 0.1px black, 0px -2px 0.1px black, 1px 0px 0.1px black, -1px 0px 0.1px black, -1px -0px 0.1px black, 1px -0px 0.1px black, 1px 1px 0.1px black, -1px 1px 0.1px black, -1px -1px 0.1px black, 1px -1px 0.1px black, 1px 2px 0.1px black, -1px 2px 0.1px black, -1px -2px 0.1px black, 1px -2px 0.1px black, 2px 0px 0.1px black, -2px 0px 0.1px black, -2px -0px 0.1px black, 2px -0px 0.1px black, 2px 1px 0.1px black, -2px 1px 0.1px black, -2px -1px 0.1px black, 2px -1px 0.1px black, 2px 2px 0.1px black, -2px 2px 0.1px black, -2px -2px 0.1px black, 2px -2px 0.1px black, 0px 0px 0px hsla(0, 0%, 0%, 0);
}

CSS Embedded Text

Embedded

css
.embedded {
  color: #000000;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.20);
}

CSS Embossed Text

Embossed

css
.embossed {
  color: #603624;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.30), 1px 1px 1px rgba(0, 0, 0, 0.20);
}

Embossed

css
.embossed2 {
  color: #315252;
  text-shadow: -0px 0px hsla(0, 0%, 0%, 0.2), 0px -0px hsla(0, 0%, 100%, 0.2), -0.5px 0.5px hsla(0, 0%, 0%, 0.2), 0.5px -0.5px hsla(0, 0%, 100%, 0.2), -1px 1px hsla(0, 0%, 0%, 0.2), 1px -1px hsla(0, 0%, 100%, 0.2), -1.5px 1.5px hsla(0, 0%, 0%, 0.2), 1.5px -1.5px hsla(0, 0%, 100%, 0.2), 0px 0px 4.5px hsla(0, 0%, 0%, 1);
}

CSS Neon Text

Neon

css
.neon {
  color: rgba(255, 255, 255, 0);
  text-shadow: 0 0 2px #ffffff, 0 0 15px #70ffff, 0 0 20px #46fdff, 0 0 40px #46fdff;
}

Neon

css
.neon2 {
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 30px #fff, 0 0 50px #e3e98e, 0 0 70px #e3e98e, 0 0 90px #e3e98e;
}

CSS Fire Text

Fire

css
.fire {
  color: rgba(255, 255, 255, 0);
  text-shadow: 0 0 1px #ffffff, 0 -3px 5px #fffc00, 0 -8px 15px #ff983d, 0 -15px 30px #ff983d;
}

CSS Retro Text

Retro

css
.retro {
  color: #facd94;
  text-shadow: 2px 2px 0 #333333, 4px 4px 0 #868686;
}

CSS Blurred Text

Blurred

css
.blurred {
  color: rgba(255, 255, 255, 0);
  text-shadow: 0 0 5px rgba(255, 255, 255, .6), 0 0 15px rgba(255, 255, 255, .6), 0 0 50px rgba(255, 255, 255, .6);
}

CSS Gradient Text

Gradient

css
.gradient {
  background: -webkit-linear-gradient(top, #444444 0%, #a2a2a2 100%);
  /* Chrome10+,Safari5.1+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

CSS Golden Text

Golden

css
.golden {
  background: -webkit-linear-gradient(top, #f9d400 15%, #f89b00 35%, #f9d400 70%);
  /* Chrome10+,Safari5.1+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

CSS Stitched Text

Stitched

css
.stitched {
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 30px;
  position: relative;
  background-color: #555555;
  color: #dddddd;
  line-height: 1;
}

.stitched:after {
  content: '';
  width: calc(100% - 16px);
  height: calc(100% - 14px);
  position: absolute;
  left: 8px;
  top: 7px;
  border: 1px dashed #777777;
  padding: 2px 11px;
  box-sizing: border-box;
}

CSS 3D Effect Text

3D Effect

css
.threeD {
  color: #b50e00;
  text-shadow: 1px 1px 0 #510300, 2px 2px 0 #510300, 3px 3px 0 #510300, 4px 4px 0 #510300, 5px 5px 0 #510300, 6px 6px 0 #510300, 7px 7px 0 #510300;
}

CSS Engraved Text

Engraved

css
.engraved {
  color: #2b4949;
  text-shadow: -0px 0px hsla(0, 0%, 100%, 0.03333), 0px -0px hsla(0, 0%, 0%, 0.2), -0.5px 0.5px hsla(0, 0%, 100%, 0.03333), 0.5px -0.5px hsla(0, 0%, 0%, 0.2), -1px 1px hsla(0, 0%, 100%, 0.03333), 1px -1px hsla(0, 0%, 0%, 0.2), -1.5px 1.5px hsla(0, 0%, 100%, 0.03333), 1.5px -1.5px hsla(0, 0%, 0%, 0.2), -2px 2px hsla(0, 0%, 100%, 0.03333), 2px -2px hsla(0, 0%, 0%, 0.2), 0px 0px 40px hsla(0, 0%, 100%, 0.1);
}

CSS Anaglyphic Text

Anaglyphic

css
.anaglyphic {
  color: #f9689a;
  text-shadow: -3px -3px 0 #77caff;
}

CSS Rainbow Text

Rainbow

css
.rainbows {
  color: white;
  text-shadow: -0.2px 0.2px 0 hsla(7.2, 60%, 45%, 1), -0.4px 0.4px 0 hsla(14.4, 60%, 45%, 1), -0.6px 0.6px 0 hsla(21.6, 60%, 45%, 1), -0.8px 0.8px 0 hsla(28.8, 60%, 45%, 1), -1px 1px 0 hsla(36, 60%, 45%, 1), -1.2px 1.2px 0 hsla(43.2, 60%, 45%, 1), -1.4px 1.4px 0 hsla(50.4, 60%, 45%, 1), -1.6px 1.6px 0 hsla(57.6, 60%, 45%, 1), -1.8px 1.8px 0 hsla(64.8, 60%, 45%, 1), -2px 2px 0 hsla(72, 60%, 45%, 1), -2.2px 2.2px 0 hsla(79.2, 60%, 45%, 1), -2.4px 2.4px 0 hsla(86.4, 60%, 45%, 1), -2.6px 2.6px 0 hsla(93.6, 60%, 45%, 1), -2.8px 2.8px 0 hsla(100.8, 60%, 45%, 1), -3px 3px 0 hsla(108, 60%, 45%, 1), -3.2px 3.2px 0 hsla(115.2, 60%, 45%, 1), -3.4px 3.4px 0 hsla(122.4, 60%, 45%, 1), -3.6px 3.6px 0 hsla(129.6, 60%, 45%, 1), -3.8px 3.8px 0 hsla(136.8, 60%, 45%, 1), -4px 4px 0 hsla(144, 60%, 45%, 1), -4.2px 4.2px 0 hsla(151.2, 60%, 45%, 1), -4.4px 4.4px 0 hsla(158.4, 60%, 45%, 1), -4.6px 4.6px 0 hsla(165.6, 60%, 45%, 1), -4.8px 4.8px 0 hsla(172.8, 60%, 45%, 1), -5px 5px 0 hsla(180, 60%, 45%, 1), -5.2px 5.2px 0 hsla(187.2, 60%, 45%, 1), -5.4px 5.4px 0 hsla(194.4, 60%, 45%, 1), -5.6px 5.6px 0 hsla(201.6, 60%, 45%, 1), -5.8px 5.8px 0 hsla(208.8, 60%, 45%, 1), -6px 6px 0 hsla(216, 60%, 45%, 1), -6.2px 6.2px 0 hsla(223.2, 60%, 45%, 1), -6.4px 6.4px 0 hsla(230.4, 60%, 45%, 1), -6.6px 6.6px 0 hsla(237.6, 60%, 45%, 1), -6.8px 6.8px 0 hsla(244.8, 60%, 45%, 1), -7px 7px 0 hsla(252, 60%, 45%, 1), -7.2px 7.2px 0 hsla(259.2, 60%, 45%, 1), -7.4px 7.4px 0 hsla(266.4, 60%, 45%, 1), -7.6px 7.6px 0 hsla(273.6, 60%, 45%, 1), -7.8px 7.8px 0 hsla(280.8, 60%, 45%, 1), -8px 8px 0 hsla(288, 60%, 45%, 1), -8.2px 8.2px 0 hsla(295.2, 60%, 45%, 1), -8.4px 8.4px 0 hsla(302.4, 60%, 45%, 1), -8.6px 8.6px 0 hsla(309.6, 60%, 45%, 1), -8.8px 8.8px 0 hsla(316.8, 60%, 45%, 1), -9px 9px 0 hsla(324, 60%, 45%, 1), -9.2px 9.2px 0 hsla(331.2, 60%, 45%, 1), -9.4px 9.4px 0 hsla(338.4, 60%, 45%, 1), -9.6px 9.6px 0 hsla(345.6, 60%, 45%, 1), -9.8px 9.8px 0 hsla(352.8, 60%, 45%, 1), -10px 10px 0 hsla(360, 60%, 45%, 1), 0px 0px 0px hsla(0, 0%, 0%, 0);
}

CSS Sticker Text

Sticker

css
.stickers {
  color: indigo;
  text-shadow: 0px 0px 0px #FFD, -0px 0px 0px #FFD, -0px -0px 0px #FFD, 0px -0px 0px #FFD, 0px 1px 0px #FFD, -0px 1px 0px #FFD, -0px -1px 0px #FFD, 0px -1px 0px #FFD, 0px 2px 0px #FFD, -0px 2px 0px #FFD, -0px -2px 0px #FFD, 0px -2px 0px #FFD, 1px 0px 0px #FFD, -1px 0px 0px #FFD, -1px -0px 0px #FFD, 1px -0px 0px #FFD, 1px 1px 0px #FFD, -1px 1px 0px #FFD, -1px -1px 0px #FFD, 1px -1px 0px #FFD, 1px 2px 0px #FFD, -1px 2px 0px #FFD, -1px -2px 0px #FFD, 1px -2px 0px #FFD, 2px 0px 0px #FFD, -2px 0px 0px #FFD, -2px -0px 0px #FFD, 2px -0px 0px #FFD, 2px 1px 0px #FFD, -2px 1px 0px #FFD, -2px -1px 0px #FFD, 2px -1px 0px #FFD, 2px 2px 0px #FFD, -2px 2px 0px #FFD, -2px -2px 0px #FFD, 2px -2px 0px #FFD, 0px 0px 0px hsla(0, 0%, 0%, 0), -4px 2px 2px black;
}

CSS Thickness Text

Thickness

css
.thickness {
  color: #8AA;
  text-shadow: 0px 1px 0 #4a6868, 0px 2px 0 #405959, 0px 3px 0 #354a4a, 0px 0px 0px hsla(0, 0%, 0%, 0), -4px 4px 6px black;
}

About the Author

Tim Trott is a senior software engineer with over 20 years of experience in designing, building, and maintaining software systems across a range of industries. Passionate about clean code, scalable architecture, and continuous learning, he specialises in creating robust solutions that solve real-world problems. He is currently based in Edinburgh, where he develops innovative software and collaborates with teams around the globe.

Related ArticlesThese articles may also be of interest to you

How to Use CSS3 Media Queries for Mobile First Responsive Designs
What are CSS Conditional Comments and Conditional Rules?
The Beginner's Guide to Responsive Web Design in 2025

CommentsShare your thoughts in the comments below

My website and its content are free to use without the clutter of adverts, popups, marketing messages or anything else like that. If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.

There are no comments yet. Why not get the discussion started?

New comments for this post are currently closed.