# Gradient Text With `@supports`

This gradient text will only be applied to browsers that support both `background-clip` and `text-fill-color` . Otherwise, it will fall back to a solid color.

Since Internet Explorer supports neither `@supports` nor the gradient text effect, we can avoid using extra JavaScript to detect the browser version.

## Browser Support (as of 2017-09-14)

IE
  ⚠️ Fallback
Edge
  ✅ 15+
Firefox
  ✅ 49+
Chrome
  ✅
Safari
  ✅
Opera
  ✅ 15+
iOS Safari
  ✅
Opera Mini
  ⚠️ Fallback
Android Browser
  ✅ but…
  ⚠️ Fallback for Android 3
Chrome for Android
  ✅

## References

- meowni.ca
- githubuniverse.com
- @supports | MDN
- `background-clip`
- `text-fill-color`
- Can I use… CSS text-stroke and text-fill