Table of Contents
![Gradient underlines on text in Carrd](https://cdn.feather.blog?src=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F0ed09555-213f-4b6d-8af5-fec024657d16%252F59f27b91-15f0-4c34-8254-fde19f6223fa%252Fgradient-underline.png%3Ftable%3Dblock%26id%3D5abbe057-4cb8-4118-8c2f-f3af19addb15%26cache%3Dv2&optimizer=image&quality=80&width=280)
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.![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F0577f3a0-dba4-4670-b6a4-90bf305bd017%2F0ed09555-213f-4b6d-8af5-fec024657d16%2Fce648d06-30c5-4d96-b6f9-c3721257a347%2FUntitled.png&optimizer=image&quality=80&width=280)
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-text
as a class in the Setting of the Text element you want to underline
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F38d3b007-57fa-4669-8e8d-5200cbb3eeea%2F0ed09555-213f-4b6d-8af5-fec024657d16%2F7925e634-b13e-4f87-8d6f-c8a484136f52%2FUntitled.png&optimizer=image&quality=80&width=280)
- Tweak the position of the gradient underline by adjusting the
left
andbottom
values
- Change the colours used in the gradient by adjusting the
background
values