How to make a reflected text with CSS ? (like a mirrored text)

Question

I would like to make a reflected text effect or mirrored text effect with CSS only

Like this picture:

Does anyone have any hints, or knows if it is possible to make this effect mirrored only with CSS ?

h1 {
  font-size: 3rem;
  font-family: sans-serif;
  text-align: center;
  margin: 0;
}

<h1>Mirror</h1>
<h1>Mirror</h1>

OBS: There is no need for the red letter in the text. Illustrative image only :) as well as the code, which is just an example, does not need to be with H1

Answer 1

Two distinct elements can break the HTML semantics as it will insert content redundancy into the document. One of the elements <h1> would be merely aesthetic and adds nothing to the content, so it should not be in the content. To avoid this, one can use the element :after:

h1 {
  position: relative;
}

h1:after {
  content: attr(title);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
  transform-origin: bottom;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1 title="Reflection">Reflection</h1>

So, however, with CSS in the element :after there is no way to search for the contents of the parent element (not yet, at least), but it is possible to search for an attribute of this element, such as the attribute title. It is important to note that even being the same content of the element, this will not characterize redundancy, because semantically the text of title shall be treated differently from the content and there shall be no problem with being equal.

The attribute title, is a global attribute, which means that all HTML elements support.

---

A similar effect would be possible using the function element CSS, but it has almost no support today. With this function, you can set another element of the document as background, so you can generate the shadow including all the color effects in your source:

h1 {
  position: relative;
}

h1:after {
  content: '';
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
  transform-origin: bottom;
  background: -moz-element(#foo) ;
  position: absolute;
  bottom: 0;
  left: 0;
}

span {
  color: red;
}



.alert {
    padding: 20px;
    background-color: #f44336; /* Red */
    color: white;
    margin-bottom: 15px;
}

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  Este exemplo só funciona no <strong>Firefox</strong>
</div>

<h1 id="foo">Reflec<span>t</span>ion</h1>

The result, for those who don’t have Firefox (or are too lazy to test) is:

Answer 2

I think that would be so. Still have to make other more trivial adjustments.

h1 {
  font-size: 3rem;
  font-family: sans-serif;
  text-align: center;
}

h1.flip {
margin-top: -3.2rem;
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  background: -webkit-linear-gradient(#FFF, #777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>Mirror</h1>
<h1 class="flip">Mirror</h1>