Text Opacity Gradient

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> 

Text opacity gradient

Just use .mask instead.

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.red
            
            Text("Hello world!")
            
            /// for iOS 14 and below, replace { } with ( )
            .mask {
                ///                             no need for .opacity, just use .clear
                LinearGradient(colors: [.white, .clear], startPoint: .leading, endPoint: .trailing)
            }
        }
    }
}

Result:

CSS Gradient Text with Opacity and Gradient Text Stroke / Outline

Actually the only way i can think about using CSS and without SVG is to rely on element() combined with mask but still the support is too low:

Here is an example that will only work in Firefox. The trick is to create a text with only stroke and transparent color as a reference that will be used inside a mask of the same text where we have the same stroke to keep only the stroke visible and get the needed effect. Yes, it's a bit crazy as idea but it works.

body {

  background: #000000;

}

h1 {

  font-size: 80px;

  font-weight: 800;

  font-family: arial;

  color:#fff;

}

#ref {

  -webkit-text-stroke: 5px red;

  color:transparent;

  display:inline-block;

}

h1.grad {

  background-image: linear-gradient(to left,

      rgba(255, 0, 0, 0.3),

      rgba(0, 0, 255, 0.4),

      rgba(255, 0, 0, 0.5));

  -webkit-text-fill-color: transparent;

  -webkit-background-clip: text;

  margin: 10px;

}

h1.grad::after {

  content: attr(data-text);

}

h1.grad::before {

  content: attr(data-text);

  background: -webkit-linear-gradient(-180deg, #3399ff, #82ed89, #3399ff);

  -webkit-background-clip: text;

  -webkit-text-stroke: 5px transparent;

  position: absolute;

  z-index: -1;

  -webkit-mask:element(#ref);

          mask:-moz-element(#ref);

          mask:element(#ref);

}

body {

  background:url(https://i.picsum.photos/id/107/1000/1000.jpg) center/cover;

}

<h1 data-text="Some Text" class="grad"></h1>

<div style="height:0;overflow:hidden;">

<h1 id="ref">Some Text</h1>

</div>

Is there a way to change the opacity of my text from the center in CSS?

mask is what you need but consider the correct gradient and in your case you need a radial-gradient

h1 {
  margin:auto;
  display:table;
  color:#fff;
  font-size:50px;
  /* simply control the 10% */
  -webkit-mask:radial-gradient(circle farthest-side,#0000 10%,#000);
          mask:radial-gradient(circle farthest-side,#0000 10%,#000);
}

html {
 min-height:100%;
 background:linear-gradient(45deg,red,blue);
}

<h1> some text</h1>

Making an opacity text-gradient over a transparent background

well, it was a long day, and i've found a solution by myself.
it uses canvas.

for a canvas with html height 73px and width 720px:

var ctx = myCanvasEl.getContext("2d");
ctx.font = "53pt Arial, Helvetica, sans-serif";
var gradient = ctx.createLinearGradient(400, 0, 650, 0);
gradient.addColorStop(0, "rgb(255,255,255)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
ctx.fillStyle = gradient;
ctx.fillText(myText, 0, 58);

Creating transparent text to show gradient color of underlying div

You could use SVG, its a little outside the box, but its cross browser compatible and gives you some more options.

Working Example

<svg height="50">
    <linearGradient id="g1" x="0%" y="100%">
        <stop stop-color="blue" offset="0%" />
        <stop stop-color="green" offset="25%" />
        <stop stop-color="yellow" offset="50%" />
        <stop stop-color="orange" offset="75%" />
        <stop stop-color="red" offset="100%" />
    </linearGradient>
    <text font-size="40" fill="url(#g1)">
        <tspan x="10" y="40">Hello World!</tspan>
    </text>
</svg>

Tested and working in Chrome, Firefox, and IE9

If you've really got your heart set on a cutout effect, it can also be done with SVG.

Working Example 2

<div class="wrap">
    <div class="black">
        <svg width="300" height="100">
            <mask id="cutouttext">
                <rect width="280" height="50" x="0" y="15" fill="white" />
                <text x="50%" y="55%" text-anchor="middle" font-size="48">Hello World</text>
            </mask>
            <rect width="280" height="50" x="25" y="15" fill="black" mask="url(#cutouttext)" />
        </svg>
    </div>
</div>

Fall back for IE8 and below:

<!--[if lt IE 9]>
    <style>
        .wrap {
            color: #ff0000;
            font-size:48px;
            text-align: center;
            padding-top: 10px;
            height: 90px;
        }
        .black {
            background: black;
            margin: 0 auto;
            width:250px;
        }
    </style>
<![endif]-->

The way it looks in modern browsers:


and how it looks in IE8 and below:

Documentation:

MDN SVG Gradients

MDN SVG Text

MDN Mask

Material-UI: Text above background with opacity

If you want the opacity to only affect the image without also changing the text inside, you can use linear-gradient() function:

backgroundImage:
  'linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("image.jpg")',

Live Demo

---

Related Topics