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.

.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);
}

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

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

.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);
}

.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;
}

.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;
}

.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;
}

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

.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);
}

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

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

.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;
}

.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;
}

.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);
}

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

.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);
}

.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;
}

.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;
}