0

I am trying to do this Using CSS, can you apply a gradient mask to fade to the background over text? but I want to apply the gradient from top and bottom. 

-webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, left top, from(rgba(0,0,0,1)),      to(rgba(0,0,0,0)));

http://jsfiddle.net/QZMyd/ but it doesn't work

Community
  • 1
  • 1
Petran
  • 7,677
  • 22
  • 65
  • 104

1 Answers1

1

Please test this demo in Chrome: http://jsfiddle.net/95vPC/5/

<div class="element">
    <p>Lorem ipsum dolor sit … amet.</p>
</div>

* {
    margin: 0px;
    padding: 0px;
}
.element {
    width: auto;
    height: 300px;
    overflow: hidden;
    color: #fff;
    background: #000045;
    -webkit-mask-position: 0 0;
    /*-webkit-mask-size: 200px 200px;*/
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 0)), color-stop(19%, rgba(30, 87, 153, 0.66)), color-stop(29%, rgba(45, 70, 237, 1)), color-stop(100%, rgba(45, 70, 237, 0)));
}
daniel__
  • 11,633
  • 15
  • 64
  • 91
  • I am afraid is not what I am looking for. I am actually trying to achieve this http://jsfiddle.net/jLT9S/ with one div I have done that with 2 as you can see. – Petran Aug 06 '13 at 16:39
  • @daniel__ is it possible to use this without background: #000045; – Pushkar Kathuria Aug 30 '17 at 03:54