Gradient text Carrd template

Carrd already allows for gradient text. But you can only apply gradient to the entire text element, not selected words within the text element.Use this free template to get the gradient effect for single words:

• Get FREE Carrd template here

This template requires Pro Plus plan. If you're on Pro Standard plan and need this template to work on Pro Standard, download the compatible version here.

• See more Carrd plugins

Made by @jasonleowsg

Manual way:Here's how you can set up gradient text for just one or two words in the text element in your own site:1. Go to your Text element, wrap the word you want to highlight with double equal signs:E.g. on this site, I wanted to add text gradient to "Gradient text" in the title "Gradient text Carrd template". So I type the markdown text like this:\==Gradient text== Carrd template2. In the same Text element, go to Settings > Styles > Text: Highlight > Default. Add this CSS code:mark {
background: linear-gradient(90deg, rgba(79,231,157,1) 1%, rgba(244,219,88,1) 20%, rgba(248,114,141,1) 50%, rgba(93,178,252,1) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}3. Tweak the colors of the text gradient by adjusting the rgba values. Use a color wheel app to find the right rgba values. Tweak the direction of the gradient by changing the degree of the angle 90deg You can use cssgradient.io to find the right combo of values.4. Don't forget to add to the same CSS code to Mobile view as well - Settings > Styles > Text: Highlight > MobileTadaaa you're done. Simple.