kaioe
3/18/2015 - 5:23 PM

CSS: Text Effect

Text Effects:

  • Emboss
  • Deboss
  • Retro-Shadow
  • Retro-Double-Shadow
<!-- HTML <p class="retro-double">Retro Double Shadow</p> -->
body {
  background-color: #dfe3e5;
  font: 700 6.25em Helvetica;
  text-align: center;
}

.retro-double {
  text-shadow: 1px 1px 0 rgb(223, 227, 229), 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: #3f3f3f;
}
<!-- HTML <p class="retro">Retro</p> -->
body {
  background-color: #dfe3e5;
  font: 700 6.25em Helvetica;
  text-align: center;
}

.retro {
  text-shadow: 1px 1px 0 rgb(223, 227, 229), 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: #3f3f3f;
}
<!-- HTML <p class="deboss">Deboss</p> -->
body {
  background-color: #dfe3e5;
  font: 700 6.25em Helvetica;
  text-align: center;
}

.deboss {
  text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0, 0, 0.2);
  color: #d7dee1;
}
<!-- html <p class="emboss">Emboss</p> -->
body {
  background-color: #dfe3e5;
  font: 700 6.25em Helvetica;
  text-align: center;
}

.emboss {
  text-shadow: 0 -4px 3px rgba(255, 255, 255, 0.3), 0 3px 4px rgba(0, 0, 0, 0.2);
  color: #d7dee1;
}