{"id":3896,"date":"2024-09-20T14:35:26","date_gmt":"2024-09-20T19:35:26","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3896"},"modified":"2024-09-20T14:35:27","modified_gmt":"2024-09-20T19:35:27","slug":"gradient-text-with-a-drop-shadow","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/gradient-text-with-a-drop-shadow\/","title":{"rendered":"Gradient Text with a Drop Shadow"},"content":{"rendered":"\n

During our annual promotion, we had this branding for the countdown timer:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

The “Ends in X days!” needed to be HTML text since it’s dynamic based on the sale end date. Note that it both colored with a gradient and has both a stroke and a drop shadow.<\/p>\n\n\n\n

We can achieve a text gradient by clipping the background to the text with background-clip: text<\/code>, like this:<\/p>\n\n\n

.Countdown<\/span> {\n  background<\/span>: linear-gradient<\/span>(#fff000, #ff3600);\n  background-clip<\/span>: text;\n  -webkit-background-clip<\/span>: text;\n  color<\/span>: transparent;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This creates a gradient background and then clips the background to the text. Then we hide the actual text itself with color: transparent<\/code>. Here’s the demo:<\/p>\n\n\n\n