Reflecting text with gradient effect in CSS

I need to reflect text with CSS and add gradient to it. Here is an example of what I want. But I do not want fade-out png image with alpha transparency as body has a background.

https://jsfiddle.net/9318Ltkp/

.slogan {
  font-size: 30px;
  line-height: 121px;
  position: relative;
  float: right;
  margin-right: 115px;
  text-transform: uppercase;
  color: #f00;
}
.slogan::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -26px;
  left: 0;
  display: block;
  content: 'comming soon';
  transform: scaleY(-1);
  opacity: .5;
}

<div class="slogan">comming soon</div>

回答1:

Note: I could'nt find anyway to get this working across browsers and I'd say there is probably no way at all. If your need is to support WebKit powered browsers alone then you could use the below.

In this method, a gradient which goes from transparent to semi-transparent black is assigned as background to the pseudo-element (which produces the reflection effect) and then the background is clipped to just be within the boundaries of the text using WebKit's -webkit-background-clip .

Unfortunately, no equivalent property exists for other browsers. In other browsers, we can assign a linear-gradient background to the element, make the text color as transparent but that's about it. There is no way to clip the background to be within the text. It will apply to the entire element.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
div {
  position: relative;
  display: inline-block;
  font-size: 24px;
}
div:after,
div:before {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0px;
  transform: scaleY(-1);
  transform-origin: bottom;
}
div:after {
  content: attr(data-content);
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content='Reflected Text'>Reflected Text</div>

Cross-browser solution:

This the best cross browser solution that I could find but it involves hard cutting the reflected text by putting a overflow: hidden on the parent instead of a graceful fade.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
div {
  position: relative;
  display: inline-block;
  font-size: 24px;
  height: 1em;
  padding-bottom: .5em;
  overflow: hidden;
}
div:after {
  position: absolute;
  content: attr(data-content);
  width: 100%;
  height: 1em;
  top: 0px;
  left: 0px;
  transform: scaleY(-1);
  transform-origin: bottom;
  opacity: 0.3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content='Reflected Text'>Reflected Text</div>

Original Answer:

You can achieve this by overlaying a :before pseudo element with the gradient background on top of the :after pseudo-element.

This approach would work only when the background is a solid color (any solid color). All that is needed to be done is change the colors in the gradient to match it. However this wouldn't work when used with image or gradient backgrounds.

div {
  position: relative;
  display: inline-block;
  font-size: 24px;
}
div:after,
div:before {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0px;
  transform: scaleY(-1);
  transform-origin: bottom;
}
div:after {
  content: attr(data-content);
}
div:before {
  content: '';
  background: linear-gradient(to bottom, rgba(0, 128, 0, 1) 30%, rgba(0, 128, 0, 0.7) 70%);
  z-index: 2;
}
body {
  background: rgb(0, 128, 0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content='Reflected Text'>Reflected Text</div>

回答2:

For gradient i had already design this Please find this on the code below:- For reflected i think it is also a easy task with svg rotate 180 deg and gradient top to bottom transparent to white. If this cause some other effect then please use clip svg this will help you.

<html>
<body>

<svg height="150" width="400">
  <defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          </linearGradient>
  </defs>

  <text fill="url('#grad2')" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>


</body>

</html>