1. Code
  2. HTML & CSS

Quick Tip: Nonintrusive CSS Text Gradients

Read Time:1 minLanguages:

Though not completely cross browser compatible, there are ways to nonintrusively create pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Final Simple HTML

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

Final CSS

Note: Paul referenced an even more succinct method in the comments. Be sure to check that out as well!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.