How to Apply a CSS Gradient Over a Text, from a Transparent to an Opaque Colour

How to apply a CSS gradient over a text, from a transparent to an opaque colour

The relevant CSS is on the pseudoelement :after of the <article> wrapper I used

article {
  position: relative;
}

article:after {
  position: absolute;
  bottom: 0;  
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(255,255,255, 1) 20%, 
     rgba(255,255,255, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}

  <article>
      <p>
         Had you stepped on board the Pequod at a certain juncture 
         of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers. Had you stepped on board the Pequod at a certain 
         juncture of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers.
      </p>
  </article> 

How can I add a transparent to black gradient over a div / image?

You can't use the gradient and background image at the same time on the same element, since both are a background-image. But you can assign the gradient to a pseudo element of .bItem, so you won't have to include an additional element for it. Also, you can just use transparent and black instead of rgba()

.bItem {  display: flex;  justify-content: flex-end;  flex-direction: column;  position: absolute;  top: 0;  right: 9px;  bottom: 0;  left: 9px;  padding: 18px;  background-size: cover;  background-position: center center;  background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);}
.bItem:after {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: linear-gradient(to bottom, transparent 0%, black 100%);}

<div class="box">  <a class="bItem" href="/about/">    <div class="bText white">      <h3>TITLE</h3> Additional text here.</div>  </a></div>

image with gradient overlay, but text should be on front (no opacity)

Solution is to properly nest the elements and using position tags.

<div class="background">
    <div class="blue-gradient"></div>    
    <h1>This text goes to front and is white</h1>
</div>

CSS

.background {
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    background-image: url('http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cute-Cats-cats-33440930-1280-800.jpg');
}
.blue-gradient {
    width:100%;
    height: 100%;
    position:absolute;
    opacity: 0.7;
    background-image: radial-gradient(circle farthest-corner at center, #15497E 0%, #3D93BC 100%);
}
h1 {
    position:relative;
    color:#fff;
}

Fiddle: http://jsfiddle.net/9tN35/

Using CSS, can you apply a gradient mask to fade to the background over text?

I've been wondering this exact same thing. The solution is actually quite simple. Although this is of course quite a modern feature, so you're stuck to browser compatibility.

Webkit can take care of this with a single line of CSS:

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

(The new standardised way of doing it is would use mask-image and linear-gradient using its new syntax. See caniuse.com for mask-image and linear-gradient.)

This would fade out the bottom 10% of whatever element it's applied to, without using even so much as an image. You could add padding-bottom: 50% to make sure that content is only faded when there is more to scroll to.

Source: http://www.webkit.org/blog/181/css-masks/

A Mozilla (Gecko) fallback is a bit trickier though: you can use its 'mask' feature, but this demands a SVG-image. You could try to base64 embed that image into your stylesheet... Use mask-image in Firefox now.

How to fade out text on top of semi-transparent div using CSS?

I finally found a solution that meets all my requirements by adding just one line of CSS to .box > p: -webkit-mask-image (accepted answer by Adrian van Vliet). I've updated my codepen to show this solution: http://codepen.io/thdoan/pen/wKZBrN

.box > p {
    -webkit-mask-image: -webkit-gradient(
        linear,
        left 50%,
        left bottom,
        from(rgba(0,0,0,1)),
        to(rgba(0,0,0,0))
    );
}

Even though this is considered "non-standard" CSS, it's no big deal for my case since if a browser doesn't support it then the content will degrade gracefully to white text simply not having a gradient fade. In the meantime, I am experimenting with another solution that is more cross-browserish using SVG: Applying SVG effects to HTML content. I will update this answer with a codepen using an SVG mask if I ever get it to work.

Thanks to all who replied :-).

UPDATE: Here is a solution using SVG: http://codepen.io/thdoan/pen/rObVdJ

The full cross-browser solution is laid out in the nice tutorial, CSS Masks – How To Use Masking In CSS Now by Christian Schaefer.

Gradient from transparent to color in CSS

Your gradient is defined as going from 'white' to 'white'. In other words, there is no gradient.

In the final 2014 syntax:

background-image: linear-gradient(to right, transparent, white);

Note that prefixed versions (moz-, webkit-, o-, etc) use a different syntax, for backwards compatibility.

Hiding effect of block of text with image as background! linear gradient of opacity?

You could use -webkit-mask-image (browser support)

#background{  background-image: url(https://media.boingboing.net/wp-content/uploads/2018/05/cool-background1.png);   text-align:center;}#opacity-wrapper{  background-image: url(https://media.boingboing.net/wp-content/uploads/2018/05/cool-background1.png);   text-align:center;  -webkit-mask-image:  linear-gradient(to top,     rgba(255,255,255, 0) 5%,      rgba(255,255,255, 1) 60%,     rgba(255,255,255, 0) 95%  )}

<div id="background">  <div id="opacity-wrapper">    <p>This is some text</p>    <p>This is some text</p>    <p>This is some text</p>    <p>This is some text</p>    <p>This is some text</p>    <p>This is some text</p>    <p>This is some text</p>    <p>This is some text</p>  </div></div>

---

Related Topics