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.

EDIT: all browsers except IE now support all mask- properties mentioned here.

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

p  {
  color: red;
  font-size: 30px;
  -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));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}

<div><p>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 </p></div>

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

div {
  background-color: lightblue;
}

p {
  color: red;
  overflow: hidden;
  position: relative;
  width: 200px;
  mix-blend-mode: hard-light;
}

p::after {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(transparent, gray);
  pointer-events: none;
}

<div><p>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 </p></div>

You put the opaque gradient, and you fake the transparency on top by making a gradient from transparent to background-color. background-image: linear-gradient(0deg, transparent 0%, white 100%), linear-gradient(90deg, #e89005 0%, #ec7505 33%, #d84a05 66%, #f42b03 100%); Replace white by the background color you need.

The slash alpha notation only works for established color value. Here, you've got multiple values going on here, color and a percentage so the slash alpha notation won't work. However, you could supply a different color value that has the alpha value, like from-[#00000080_25%], from-[rgb(0_0_0/.5)_25%], from-[rgba(0,0,0,.5)_25%], etc.

Let’s label the gradient: Color A +---------+ Color B100% opacity +---------+ 0% opacityWe’re interested in what’s happening in the middle, so 50% of the way through the gradient.Figma shows 50% of color B, at 50% opacity.The browser shows 0% of color B, at 50% opacity.I would lean into the direction of Figma rendering it correctly. It shows all the intermediate colors, so the orange color “leaks” into the gradient from the right side. Makes sense to me.On the other hand, browsers use the alpha-premultiplied color space. As a result, it doesn’t matter what color you set on the other end - all hues will render exactly the same. To me, this is a weird behavior, because the browser ignores the color of the end stop.I assume this creates problems when handing off the designs to developers. If they use the CSS as-is, they might not have the same result as shown on designs.Possible solutions:Manually add the middle gradient stop, and set it to orange at 50% opacity.If you don’t want Figma’s effect, use the same colors on A and B ends of the gradient, and only set different opacities.Tell your developers to use a solid gradient, with a mask that’s another gradient. (See below)Convince Figma to automatically calculate the intermediate gradient stops, so Figma’s rendering can be replicated in browsers that render it “wrong”. Tagging @y_toku.Convince W3C to allow disabling alpha-premultiplied behaviors, which currently completely ignore the color stops.Figma’s rendering:CSS (will cause this issue):background: linear-gradient(to right, red, rgba(0, 0, 255, 0));CSS (fixed):background: linear-gradient(to right, red, blue);mask-image: linear-gradient(to right, white, transparent);

Replace hexidecimal color-codes with rgba color-codes:

div {
width: 150px;
height: 150px;
background-image: linear-gradient(to left, rgba(0,67,116,0.6) -26.48%, rgba(0,51,102,0.6) 73.52%);
}

<div>
</div>

Yes. You can use rgba in both webkit and moz gradient declarations:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

(src)

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

(src)

Apparently you can even do this in IE, using an odd "extended hex" syntax. The first pair (in the example 55) refers to the level of opacity:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

(src)