Table of Contents
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:
How to add a gradient underline in Carrd
- 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>- Add
gradient-textas a class in the Setting of the Text element you want to underline
- Tweak the position of the gradient underline by adjusting the
leftandbottomvalues
- Change the colours used in the gradient by adjusting the
backgroundvalues
We hope you liked this tutorial. Check out other Carrd tips & tricks.
Written by
