(+84) 463.28.7979

Quick Tip: Nonintrusive CSS Text Gradients


Final Simple HTML

  1. <h1 data-text=”Hello World”> Hello World </h1>

By using custom attributes, we can then hook into these values from within our stylesheet by using theattr() function.


Final CSS

  1. /* Select only h1s that contain a ‘data-text’ attribute */
  2. h1[data-text] {
  3. position: relative;
  4. color: red;
  5. }
  6. h1[data-text]::after {
  7. content: attr(data-text);
  8. z-index: 2;
  9. color: green;
  10. position: absolute;
  11. left: 0;
  12. -webkit-mask-image: -webkit-gradient(
  13. linear,
  14. left top, left bottombottom,
  15. from(rgba(0,0,0,1)),
  16. color-stop(40%, rgba(0,0,0,0))
  17. );

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>