Gradient underlines on text in Carrd

Here’s how to add an amazing text styling in Carrd for more impact on your headlines or quotes.

Gradient underlines on text in Carrd
Here’s how to add an amazing text styling in Carrd for more impact on your headlines or quotes. It’s a code-based technique to add gradient underlines.
 
📌
This tip was created by
Jason Leow
, of Jason’s Plugins
 
It’s worth noting that text-decoration-color in CSS doesn't accept linear-gradient() as input, only conventional color values. So this tutorial is a workaround using an ::after pseudo element.
This is the effect it creates, which can be adapted to your tastes with a few options:
notion image

How to add a gradient underline in Carrd

  1. Copy and paste this code snippet into an Embed element on your page:
<style>
.gradient-text::after {
content: "";
position: absolute;
left: 25%; /* Adjust the position of the gradient underline */
bottom: -10%; /* Adjust the position of the gradient underline */
width: 184px;
height: 5px; /* Adjust the height of the gradient underline */
background: linear-gradient(to right, #ff9900, #9900ff); /* Gradient colors */
}
</style>
  1. Add gradient-text as a class in the Setting of the Text element you want to underline
notion image
  1. Tweak the position of the gradient underline by adjusting the left and bottom values
  1. Change the colours used in the gradient by adjusting the background values
 
 
We hope you liked this tutorial. Check out other Carrd tips & tricks.
We hope you liked this tutorial. Check out other Carrd tips & tricks.

We send weekly, very short emails featuring Carrd resource links

Join the Starrt mailing list

Subscribe

Written by