Home ⥤ HTML & CSS Tutorials ⥤

18 Great CSS3 Text Effects You Can Copy/Paste

Last Updated May 27, 2023 by . First Published in 2014.

1,012 words, estimated reading time 4 minutes.

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.

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;
}
Was this article helpful to you?
 
Comments

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?

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.