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


Tags: css,html5,css3

Problem :

Cheers!

I am a newbie in CSS/HTML, but I want to apply a gradient over a text, like that on the image below. How can I implement it with css?


  enter image description here



Solution :

Try this example: http://jsbin.com/iwepas/3/ (tested on Firefox 18)

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 */
}

Output


output


Please note: on older browser you may need to use a from-transparent-to-opaque png background applied on the pseudoelement while other browser need vendor prefixes for linear-gradient


    CSS Howto..

    Cakephp how to remove underline on links

    How to temporarily add a CSS style?

    How to fill the width under an image with a caption without defining the width of the caption?

    How can I mimic Leaflet.Draw tooltip style with a different tooltip plugin?

    How to do caption hover effect on a background?

    How to remove Clear:Both in CSS

    Javafx CSS How to inherit background color from other css settings

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    How do I center a table?

    How is Bootstrap's `nav` class making anchors move to their own line

    How to create an enumerated tabular environment in HTML/CSS?

    How can I make my div's svg background image scale dynamically and stay in the center of the div

    How to put CSS content in select box and rotate it?

    How can I put an input element on the same line as its label?

    How to calculate percentages in LESS CSS?

    How to resize the width of div left to another which has float:left;?

    How to use jQuery and CSS to write vertical drawer

    How to set different css attributes with JQuery?

    How can I keep things aligned in an adaptive layout

    In what circumstances is flex-shrink applied to flex elements and how does it work?

    How to create gradient background with CSS in Firefox < 3.6?

    :hover feature , How to approach the same result as js code by using css

    how do you link static pages in rails to your css files? [closed]

    How do I apply CSS style to ASCII character

    How to show middle of image in div using css?

    How to customize devise login and signup forms created using the simple_form gem?

    How to squircle an app icon image with just CSS

    How to create Rectangle With Gradient Color Stripes Border via CSS?

    How to refresh to top of HTML page using css

    ML - CSS How to align correctly a 'required' asterisk before la form label with the label text?