Photoshop Question posted in
The official user guide can be found here.

CSS fade to background – Photoshop

I have looked everywhere so much so that it looks like it’s not possible yet.
I am looking for something like an opacity gradient mask if that makes sense.

Like this:

example

It may just look like a straight forward text fade from white to transparent but it’s more so that it’s the div that the text is within which is fading to background.
The text is overflowing outside the div area so it’s indicating to a user to scroll up.

So it’s like a layer mask with a gradient in photoshop, maybe something like {opacity: linear-gradient(#fff, #000)}, does something like this exist?

Is this a possibility with CSS at all?

Tags:

4

Answers


  1. 0

    You can use this:

    background:-moz-linear-gradient(-65deg, #e0e0e0 30%, #e0e0e0 10%, 
#e0e0e0 20%, #4285F4 40%, #4285F4 50%, #fff 70% );
filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=0, startColorstr='#4285F4', endColorstr='#63a62f');
 /* For Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(GradientType=0, startColorstr='#4285F4', endColorstr='#63a62f')"; 
/* For Internet Explorer 8 */}

    from here:

    -65deg, #e0e0e0 30%, #e0e0e0 10%, #e0e0e0 20%, #4285F4 40%, #4285F4 50%, #fff 70%

    To customize IE looks, you can stylize it from here:

    startColorstr='#4285F4', endColorstr='#63a62f'

    you can customize the color you wish and number of procentage for linear gradient style.

    Login or Signup to reply.
  2. 0

    Yes its possible. You can use tools like CSS Gradient Generator to get the gradient colors you want (even transparencies) Then you can make a div that is over your text. In your case you would want to select a vertical fade and then allow the top to be transparent and the bottom would have a color. Then you can position that div with your gradient background over your text. Here is the code I used:

    CSS

    .over {
     background: -moz-linear-gradient(top,  rgba(30,87,153,0) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* IE10+ */
     background: linear-gradient(to bottom,  rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
     width: 600px;
     height: 600px;
     position: absolute;
     left: 0;
     top: 0;
}

.text {
    color: red;
    width: 580px;
}

    HTML

    <div class="over"></div>
<div class="text">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

    you will need to play with the code in order to get it to work for your specific environment but that should get you started. You can see it in action here. Hope that helps.

    Login or Signup to reply.
  3. 0

    You can use a pseudo element for this (which would reduce markup as well as speed up rendering):

    (note. this is only a draft for illustration only. Please use your own coloring).

    html,body{
  margin:0;
  padding:0;
  }
div{
  position:relative;
  height:300px;
  width:400px;
  margin:0 auto;
  display:inline-block;
  overflow:auto;
  align-content:center;
  }
div:before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  height:300px;
  width:400px;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

  }
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse justo sapien, ultrices vel lorem eu, dapibus commodo dui. Maecenas sagittis massa id libero malesuada, et vehicula libero dapibus. Etiam porta luctus tellus volutpat tempus. Etiam urna
  velit, consequat sit amet nisl non, laoreet auctor quam. Suspendisse pellentesque ultricies ullamcorper. In commodo finibus lacinia. Sed eget lobortis sem. Nulla egestas hendrerit odio at elementum. Mauris orci orci, viverra id lectus id, elementum
  varius lorem. Mauris efficitur lectus non laoreet aliquam. Aliquam laoreet elit justo, ut accumsan purus vestibulum at. Suspendisse eget fermentum leo. Integer laoreet mi sit amet turpis luctus lobortis. Aliquam auctor lacinia nisl, in interdum mi posuere
  ut. Sed turpis ante, efficitur vitae mi eu, tristique iaculis neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mattis dolor sit amet iaculis malesuada. Nulla pulvinar, sapien quis vehicula ullamcorper,
  magna ante euismod ex, id placerat arcu nisi vel urna. Etiam lorem velit, bibendum congue bibendum in, tincidunt eget magna. Integer dictum molestie felis, eget bibendum velit aliquam vel. Quisque felis purus, bibendum vel augue ut, vestibulum iaculis
  lorem. Proin in mi aliquam, aliquam erat quis, imperdiet nibh. Nulla scelerisque sollicitudin nisi et dignissim. Proin placerat leo dolor, non hendrerit lacus aliquet quis. Nam tempus, urna sed sollicitudin porttitor, tellus felis hendrerit eros, et
  lacinia arcu arcu id lectus. Duis molestie arcu in finibus dictum. In porttitor massa sit amet urna porta, sed iaculis leo fermentum. Quisque augue risus, pulvinar nec est sit amet, commodo fringilla velit. In blandit urna eget quam finibus, ac facilisis
  ante tincidunt. Duis luctus libero eu aliquet viverra. Suspendisse tincidunt eros euismod suscipit scelerisque. Sed tincidunt enim vel ultrices pellentesque. Cras id volutpat metus. Sed sagittis ut quam vel dapibus. Nulla interdum ut enim sed gravida.
  Suspendisse lacinia orci ut tellus imperdiet, hendrerit rhoncus mi rhoncus. Nulla tempus risus erat, nec convallis quam imperdiet vitae. Sed sodales malesuada hendrerit. Proin malesuada erat nec arcu faucibus feugiat. In hac habitasse platea dictumst.
  Suspendisse sagittis nunc id risus hendrerit, ut luctus augue maximus. Nunc varius sit amet arcu eu sagittis. Pellentesque convallis convallis finibus. Nulla rhoncus risus in ipsum pharetra tempus. Aenean id accumsan leo. Mauris imperdiet suscipit est,
  sed vehicula neque sagittis nec. Mauris sit amet tincidunt velit. Quisque scelerisque facilisis ligula sit amet aliquam. Maecenas vel magna vel sapien congue congue quis ut orci. Vivamus vel elementum erat. Duis scelerisque odio sed ligula condimentum
  fermentum. Praesent ac arcu eu nibh vehicula tempus ut sed lorem. Vestibulum ligula sapien, ornare et vehicula in, gravida et mauris. Vestibulum dignissim tellus eu nulla consequat pharetra. Praesent varius sem et ultricies bibendum. Maecenas cursus
  egestas egestas. Sed mollis, orci malesuada tempor malesuada, sem elit ornare odio, ac hendrerit metus lorem faucibus sem. Cras lacinia elementum arcu sed cursus. Integer cursus velit arcu, sit amet commodo metus ultricies ultricies. In hac habitasse
  platea dictumst. Nulla pellentesque sem sapien. Cras lobortis in ante in vestibulum. Nulla faucibus, lectus et mattis vehicula, ex arcu interdum enim, nec efficitur elit tortor id dolor. Curabitur scelerisque tempor tellus vitae lacinia. Vivamus eget
  dolor quis diam pretium ultrices vitae eu ipsum.
</div>
    Login or Signup to reply.
  4. 0

    You can get this effect with masking. mask-image = gradient makes it

    .base {
  background: url("http://placekitten.com/1000/750");
  width: 400px;
  background-size: cover;
}

.faded {
  -webkit-mask-image: linear-gradient(0deg, transparent, black);
  }
    <div class="base">
  <div class="faded">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tincidunt augue. Vestibulum sit amet est et tellus blandit bibendum quis id neque. Quisque lacinia, nunc et pharetra egestas, mi sapien tristique ante, quis fringilla sem leo et eros. Donec porttitor id nisl non egestas. Cras sed neque consectetur, hendrerit est in, ullamcorper sem. Suspendisse dolor nunc, maximus ac elit efficitur, congue tempus nisi. Fusce nec imperdiet mi, a porttitor sem. Vestibulum tincidunt, libero a lacinia commodo, felis sapien malesuada turpis, eu accumsan ligula elit vestibulum ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla gravida varius ex ac luctus. In non sapien nibh. Aliquam efficitur eu risus vitae aliquam. Nunc risus est, tincidunt sit amet consectetur quis, bibendum nec tellus. Vivamus non faucibus velit, nec tempor quam.

Morbi sem tortor, tristique at ex in, cursus gravida ante. Curabitur ut mi id arcu semper ullamcorper id mollis nibh. Phasellus et pharetra odio. Mauris lacinia hendrerit ante. Donec cursus urna felis, vitae dictum neque varius sit amet. Donec ut tristique turpis. Integer faucibus dictum tempus. Suspendisse id eros a erat sodales hendrerit. Ut et mauris quis sapien dictum pharetra. Pellentesque ornare nulla diam, porttitor interdum felis ultricies non. Proin tempus libero in lacus efficitur elementum. Morbi venenatis dignissim ante, sed bibendum libero tempor vitae.</div></div>

    This will work only on webkit browsers. You can get Firefox support by doing it on a svg element

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search