CSS3 opacity gradient

Question

I am looking to create an effect like this  but my website has a dynamic background-color  Note that this example uses a white overlay  which does not work with different backgrounds   p       width  300px      overflow  hidden      height  50px      line-height  50px      position  relative    p after       content          width  100px      height  50px      position  absolute      top  0      right  0      background  linear-gradient 90deg  rgba 255 255 255 0   rgba 255 255 255 1        What I was hoping to do was to set up a CSS opacity gradient  This sort of works  but the code is too messy  Looking at this second example  I could implement it in jQuery  but is there any way to do this entirely in CSS

User · Answer

Except using css mask answered by  vals  you can also use transparency gradient background and set background-clip to text  Create proper gradient  background  linear-gradient to bottom  rgba 0  0  0  1  0   rgba 0  0  0  0  100     Then clip the backgroud with text  background-clip  text  color  transparent   Demo https   jsfiddle net simonmysun 2h61Ljbn 4  Tested under Chrome 75 under Windows 10  Supported platforms   https   caniuse com mdn-css properties background-clip text https   caniuse com css-gradients

User · Answer

We can do it by css like  body     background   000    background-image  linear-gradient 90deg  rgba 255  255  255   3  0   rgba 231  231  231   3  22 39   rgba 209  209  209    3  42 6   rgba 182  182  182   3  79 19   rgba 156  156  156   3  104 86

User · Answer

You can do it in CSS  but there isn t much support in browsers other than modern versions of Chrome  Safari and Opera at the moment  Firefox currently only supports SVG masks  See the Caniuse results for more information   CSS     p       color  red      -webkit-mask-image  -webkit-gradient linear  left top  left bottom       from rgba 0 0 0 1    to rgba 0 0 0 0         The trick is to specify a mask that is itself a gradient that ends as invisible  thru alpha value   See a demo with a solid background  but you can change this to whatever you want   DEMO  Notice also that all the usual image properties are available for mask-image   x000D   x000D  p    x000D    color  red  x000D    font-size  30px  x000D    -webkit-mask-image  linear-gradient to left  rgba 0 0 0 1   rgba 0 0 0 0    linear-gradient to right  rgba 0 0 0 1   rgba 0 0 0 0    x000D    -webkit-mask-size  100  50   x000D    -webkit-mask-repeat  no-repeat  x000D    -webkit-mask-position  left top  left bottom  x000D      x000D   x000D  div   x000D      background-color  lightblue  x000D    x000D   lt div gt  lt p gt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  lt  p gt  lt  div gt  x000D   x000D   x000D    Now  another approach is available  that is supported by Chrome  Firefox  Safari and Opera    The idea is to use   mix-blend-mode  hard-light    that gives transparency if the color is gray  Then  a grey overlay on the element creates the transparency   x000D   x000D  div   x000D    background-color  lightblue  x000D    x000D   x000D  p   x000D    color  red  x000D    overflow  hidden  x000D    position  relative  x000D    width  200px  x000D    mix-blend-mode  hard-light  x000D    x000D   x000D  p  after   x000D    position  absolute  x000D    content      x000D    left  0px  x000D    top  0px  x000D    height  100   x000D    width  100   x000D    background  linear-gradient transparent  gray   x000D    pointer-events  none  x000D    x000D   lt div gt  lt p gt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  lt  p gt  lt  div gt  x000D   x000D   x000D

User · Answer

I think the  messy  second method  which is linked from another question here may be the only pure CSS solution   If you re thinking about using JavaScript  then this was my solution to the problem      demo  using a canvas element to fade text against an animated background      The idea is that your element with the text and the canvas element   are one on top of the other  You keep the text in your element  in   order to allow text selection  which isn t possible with canvas   text   but make it completely transparent  with rgba 0 0 0 0   in   order to have the text visible in IE8 and older - that s because you   have no RGBa support and no canvas support in IE8 and older        You then read the text inside your element and write it on the canvas   with the same font properties so that each letter you write on the   canvas is over the corresponding letter in the element with the text       The canvas element does not support multi-line text  so you ll have   to break the text into words and then keep adding words on a test line   which you then measure  If the width taken by the test line is bigger   than the maximum allowed width you can have for a line  you get that   maximum allowed width by reading the computed width of the element   with the text   then you write it on the canvas without the last word   added  you reset the test line to be that last word  and you increase   the y coordinate at which to write the next line by one line height    which you also get from the computed styles of your element with the   text   With each line that you write  you also decrease the opacity of   the text with an appropriate step  this step being inversely   proportional to the average number of characters per line        What you cannot do easily in this case is to justify text  It can be   done  but it gets a bit more complicated  meaning that you would have   to compute how wide should each step be and write the text word by   word rather than line by line       Also  keep in mind that if your text container changes width as you   resize the window  then you ll have to clear the canvas and redraw the   text on it on each resize       OK  the code       HTML    lt article gt     lt h1 gt Interacting Spiral Galaxies NGC 2207  IC 2163 lt  h1 gt     lt em class  timestamp  gt February 4  2004 09 00 AM lt  em gt     lt section class  article-content  id  art-cntnt  gt       lt canvas id  c  class  c  gt  lt  canvas gt In the direction of  lt  --and so on-- gt       lt  section gt   lt  article gt        CSS   html     background  url moving jpg  0 0    background-size  200     font  100  1 3 Verdana  sans-serif    animation  ani 4s infinite linear    article     width  50em     tweak this         padding   5em    margin  0 auto     article-content     position  relative    color  rgba 0 0 0 0        add slash at the end to check they superimpose     color  rgba 255 0 0  5          c     position  absolute    z-index  -1    top  0  left  0     keyframes ani   to   background-position  100  0            JavaScript   var wrapText   function ctxt  s  x  y  maxWidth  lineHeight      var words   s split       line              testLine  metrics  testWidth  alpha   1         step    8 maxWidth ctxt measureText s  width     for var n   0  n  lt  words length  n          testLine   line   words n             metrics   ctxt measureText testLine       testWidth   metrics width      if testWidth  gt  maxWidth          ctxt fillStyle    rgba 0 0 0   alpha            alpha  -  step        ctxt fillText line  x  y         line   words n               y    lineHeight            else line   testLine        ctxt fillStyle    rgba 0 0 0   alpha        alpha  -  step    ctxt fillText line  x  y     return y   lineHeight     window onload   function       var c   document getElementById  c           ac   document getElementById  art-cntnt              use currentStyle for IE9          styles   window getComputedStyle ac         ctxt   c getContext  2d           w   parseInt styles width split  px   0   10         h   parseInt styles height split  px   0   10         maxWidth   w         lineHeight   parseInt styles lineHeight split  px   0   10          x   0         y   parseInt styles fontSize split  px   0   10          text   ac innerHTML split   lt  canvas gt    1      c width   w    c height   h    ctxt font    1em Verdana  sans-serif     wrapText ctxt  text  x  y  maxWidth  lineHeight

[css] CSS3 opacity gradient?

Demo

Supported platforms:

Examples related to css