Website development and design blog, tutorials and inspiration

18 Great CSS3 Text Effects

Here is a collection of 18 great CSS3 text effects to brighten up your typography

By , 8th May 2014 in HTML/CSS

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

  1. .outlined {
  2. color: darkslategrey;
  3. 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);
  4. }

CSS Embedded Text

Embedded

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

CSS Embossed Text

Embossed

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

Embossed

  1. .embossed2 {
  2. color: #315252;
  3. 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);
  4. }

CSS Neon Text

Neon

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

Neon

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

CSS Fire Text

Fire

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

CSS Retro Text

Retro

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

CSS Blurred Text

Blurred

  1. .blurred {
  2. color: rgba(255, 255, 255, 0);
  3. 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);
  4. }

CSS Gradient Text

Gradient

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

CSS Golden Text

Golden

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

CSS Stitched Text

Stitched

  1. .stitched {
  2. display: inline-block;
  3. padding: 10px 20px;
  4. margin-bottom: 30px;
  5. position: relative;
  6. background-color: #555555;
  7. color: #dddddd;
  8. line-height: 1;
  9. }
  10.  
  11. .stitched:after {
  12. content: '';
  13. width: calc(100% - 16px);
  14. height: calc(100% - 14px);
  15. position: absolute;
  16. left: 8px;
  17. top: 7px;
  18. border: 1px dashed #777777;
  19. padding: 2px 11px;
  20. box-sizing: border-box;
  21. }

CSS 3D Effect Text

3D Effect

  1. .threeD {
  2. color: #b50e00;
  3. 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;
  4. }

CSS Engraved Text

Engraved

  1. .engraved {
  2. color: #2b4949;
  3. 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);
  4. }

CSS Anaglyphic Text

Anaglyphic

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

CSS Rainbow Text

Rainbow

  1. .rainbows {
  2. color: white;
  3. 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);
  4. }

CSS Sticker Text

Sticker

  1. .stickers {
  2. color: indigo;
  3. 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;
  4. }

CSS Thickness Text

Thickness

  1. .thickness {
  2. color: #8AA;
  3. 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;
  4. }
Further Reading
Comments

There are no comments for this post. Be the first!

Leave a Reply

Your email address will not be published.