Creating text reflections

One way to make a text refection with CSS3
for Firefox and other browsers that dont support -webkit-box-reflect:

CSS reflections

.example1 h1{
  position:relative;
  font-size:70px;
  font-family: monospace;
  color: #555555;
}
.example1 h1:after{
  color: #4A5649;
  content: "CSS reflections";
  left: 0px;
  position: absolute;
  top: 38px;
  font-size:70px;
  opacity: 0.5;
  transform: perspective(990px) rotateX(82deg) scaleY(6) scaleX(1.0999) scaleY(-1);
  -webkit-transform: perspective(990px) rotateX(82deg) scaleY(6) scaleX(1.0999) scaleY(-1);
  -moz-transform:perspective(990px) rotateX(82deg) scaleY(6) scaleX(1.0999) scaleY(-1);
  -o-transform: perspective(990px) rotateX(82deg) scaleY(6) scaleX(1.0999) scaleY(-1);
  -ms-transform: perspective(990px) rotateX(82deg) scaleY(6) scaleX(1.0999) scaleY(-1);
}
			

text-shadow

.example2 h1{
  position:relative;
  font-size: 60px;
  left: 62px;
  padding-bottom: 50px;
  font-family: monospace;
  color: #555555;
}
.example2 h1:after{
  color: transparent;
  content: "text-shadow";
  left: 0px;
  position: absolute;
  top: 38px;
  font-size:60px;
  opacity: 0.5;
  text-shadow: 0 0 5px rgba(85, 85, 85, 0.46);
  transform: perspective(990px) rotateX(82deg) scaleY(6) scaleX(1.0999) scaleY(-1);
}