CODEWITHSUNDEEP
css
iwazovsky
iwazovsky

Reputation: 1927

Gradiently vanishing text on gradient background

I am trying to accomplish the effect on the text like on the image. If the background was filled with solid color, then there is no problem to get this kind of text via css. But with a gradient background this doesn't work. Tried to make the text as an image, but result is kind buggy and dummy (text must be text, not image).

How could this kind of effect be achieved? enter image description here

Upvotes: 1

Views: 371

Answers (1)

Cadence Marseille
Cadence Marseille

Reputation: 334

One solution is to use CSS masks.

Here is an example: http://jsfiddle.net/qhLWA/

HTML:

<div id="box">
  <div id="box-content">
    <h1>Testing</h1>
    <h2>This is a test</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit, metus euismod aliquam pretium, magna ligula rhoncus justo, non feugiat erat lectus ut erat. Donec dictum, magna sit amet euismod commodo, enim erat euismod tellus, sit amet tincidunt est arcu convallis risus. Curabitur at nunc enim. Cras vitae laoreet sem. Morbi nec neque blandit, ullamcorper purus eget, pretium dolor. Phasellus viverra, felis eget porta blandit, nunc lorem hendrerit urna, et sollicitudin est velit eu risus. Suspendisse eget tellus bibendum, commodo velit at, volutpat ipsum. Mauris sollicitudin velit ut ligula hendrerit pulvinar. In pellentesque nisl sem, a hendrerit ipsum tincidunt eget. Ut convallis ultricies arcu, ac imperdiet urna ultrices eu. Etiam nisl orci, vulputate et varius quis, placerat sed enim. Proin vitae posuere mi, vel fringilla nibh. Donec nec risus non dolor faucibus ornare eget nec nisl. Cras suscipit, sapien ut blandit pretium, erat lectus tristique risus, faucibus aliquam urna ipsum sed diam.
  </div>
</div>

<svg width="0" height="0">
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%">
      <stop stop-color="white" offset="0.2"/>
      <stop stop-color="black" offset="1"/>
    </linearGradient>

    <mask id="gradientMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="url(#gradient)" />
    </mask>
  </defs>
</svg>

CSS:

#box {
    padding: 10px;
    width: 500px;
    height: 300px;
    background: -moz-linear-gradient(right, #37b8d4, #4d37d4);
    background: linear-gradient(to right, #37b8d4, #4d37d4);
    font-family: 'Helvetica', sans-serif;
    color: #fff;
    line-height: 150%;
}

#box-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 20%, rgba(0, 0, 0, 0));
    mask: url(#gradientMask);
}

It uses the CSS mask property, which is supported in Firefox. For Chrome, it uses the -webkit-mask-image property.

See the HTML5 Rocks article on CSS Masking.

Another option is the one suggested by @amol. If you don't have very many lines of text like the reference image, you could place the first line's text in a <div> with class "first-line", the second line's text in a <div> with class "second-line", etc. Then, use rgba() to gradually fade out the lines of text:
http://jsfiddle.net/qhLWA/1/

The advantage of the rgba() approach is wide browser support (Chrome, Firefox, Safari, Internet Explorer 9+, and Opera 10+):
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Upvotes: 2

Related Questions