{"id":49,"date":"2021-09-26T00:22:39","date_gmt":"2021-09-26T00:22:39","guid":{"rendered":"https:\/\/webaffair.net\/blog\/?p=49"},"modified":"2025-08-27T02:20:34","modified_gmt":"2025-08-27T02:20:34","slug":"my-favourite-text-gradients","status":"publish","type":"post","link":"https:\/\/webaffair.net\/blog\/code\/snippets\/my-favourite-text-gradients\/","title":{"rendered":"My Favourite Text Gradients"},"content":{"rendered":"\n

Note: I am using -webkit prefixed styles for all three relevant rules to ensure that only browsers that implement all three will load the background gradient at all. I could use a proper polyfill and\/or @supports, but honestly this creates more readable code. Non-webkit browsers have started using webkit prefixes too, so this<\/em> code works on basically everything except Opera Mini if people let their browsers auto-update.<\/p>\n\n\n\n

Note2: Most of the gradient disappears on thin line text on most of these (though sometimes a very subtle effect is what you might be going for.) Either bold or a heavy display font like copperplate works well. Gradient text does, however, tend to be easily visible on both light and dark backgrounds – if you choose the right colors. (Though check the contrast with a visual tool for colorblindness accessibility – automated accessibility checkers only check against the fallback color.)<\/p>\n\n\n\n

Note3: Gradient text sometimes can’t be seen on highlight, particularly if you’ve set a custom highlight color, because the highlight is rendered in front of the background, which is where the gradient comes from. The fix for that is ::selection { -webkit-text-fill-color: currentColor; }<\/code><\/p>\n\n\n\nFire<\/b>\nBlood<\/b>\nTawnyfur<\/b>\nGunmetal<\/b>\nGold<\/b>\nForest<\/b>\n\n\n\n

b.fire {\n    color: crimson;\n    background: -webkit-linear-gradient(crimson, goldenrod);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\nb.blood {\n    color: crimson;\n    background: -webkit-linear-gradient(crimson, darkred);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\nb.tawnyfur {\n    color: saddlebrown;\n    background: -webkit-linear-gradient(goldenrod, sienna);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\nb.gunmetal {\n    color: slategray;\n    background: -webkit-linear-gradient( gray, darkslateblue);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\nb.gold {\n    color: darkgoldenrod;\n    background: -webkit-linear-gradient(silver, darkgoldenrod, goldenrod);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\nb.forest {\n    color:darkgreen;\n    background:-webkit-linear-gradient(yellowgreen,darkgreen,green);\n    -webkit-background-clip:text;\n    -webkit-text-fill-color:transparent;\n}<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Note: I am using -webkit prefixed styles for all three relevant rules to ensure that only browsers that implement all three will load the background gradient at all. I could use a proper polyfill and\/or @supports, but honestly this creates more readable code. Non-webkit browsers have started using webkit prefixes too, so this code works… Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[27],"tags":[18],"class_list":["post-49","post","type-post","status-publish","format-standard","hentry","category-snippets","tag-css"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":317,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/introduction-to-browser-development-tools\/","url_meta":{"origin":49,"position":0},"title":"Introduction to Browser Development Tools","author":"Jay","date":"December 18, 2025","format":false,"excerpt":"All modern desktop browsers now have integrated browser tools, however, there are subtle (and sometimes less subtle) differences between each. I find that Firefox has the best overall, though I do switch to Chrome for some specific debugging tasks. I personally only use Edge or Safari when trying to isolate\u2026","rel":"","context":"In "Basics"","block_context":{"text":"Basics","link":"https:\/\/webaffair.net\/blog\/category\/code\/basics\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":9,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/funky-cursor-colours\/","url_meta":{"origin":49,"position":1},"title":"Changing the Colors of Input Elements","author":"Jay","date":"September 16, 2021","format":false,"excerpt":"Ever been on a forum site with a really nice dark theme, but then you go to make a post, and are presented with a large blindingly white text area to type in? Maybe with tiny, hard to read font? Of course you have. But this is a 100% fixable\u2026","rel":"","context":"In "Basics"","block_context":{"text":"Basics","link":"https:\/\/webaffair.net\/blog\/category\/code\/basics\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":115,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/using-svg-filters-in-css\/","url_meta":{"origin":49,"position":2},"title":"Using SVG Filters in CSS","author":"Jay","date":"June 2, 2024","format":false,"excerpt":"Firstly, you'll need the svg itself.    <\/feTurbulence> <\/feDisplacementMap> <\/filter> <\/feGaussianBlur>