CSS3 opacity gradient?

by

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>

More Related Contents:

  1. How would I achieve a shadow that won’t show through transparent text?
  2. How to make css style on Google custom search engine [closed]
  3. The page moves to the left
  4. CSS display: inline vs inline-block [duplicate]
  5. How to style the with only CSS?
  6. Detect if an input has text in it using CSS — on a page I am visiting and do not control?
  7. CSS @media print issues with background-color;
  8. What, exactly, is needed for “margin: 0 auto;” to work?
  9. Setting width/height as percentage minus pixels
  10. Change opacity on all elements except hovered one
  11. Can I change the height of an image in CSS :before/:after pseudo-elements?
  12. What is the difference between :first-child and :first-of-type?
  13. What are the rules for CSS media query overlap?
  14. css grid of squares with flexbox
  15. Error: CSS: background: / is an incorrect operator
  16. Symfony2 – Assetic – load images in CSS
  17. Styling Password Fields in CSS
  18. Are CSS selectors case-sensitive?
  19. Applying “page-break-before” to a table row (tr)
  20. Is there a way to apply styles to Safari only?
  21. Placeholder Mixin SCSS/CSS
  22. The difference between flex:1 and flex-grow:1
  23. How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?
  24. position:relative leaves an empty space
  25. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  26. How do I keep CSS floats in one line?
  27. In a bootstrap responsive page how to center a div
  28. How to style the number on a html list?
  29. Horizontal scroll in DIV with many small DIV’s inside (no text)
  30. Creating a droplet like border effect in css

Leave a Comment