Back to all Elements

Thick Underline

An editable thick underline for your Headlines

This is a fairly simple way to add a thick underline to your elements.

We use here 2 interesting tricks:

  1. We Create a background gradient which both colors are positioned at the same point. This way there's no "gradient transition" at all, and the background seems like 2 different colors.
Gradient without "gradient"
  1. Creating a <span> element inside the <H1> element (the span could be created inside any element). This way the background is kept relative to each line.
Span inside the H1

Preview:

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:

Hover to reveal Mask

Cloneable
Code
Design

A fixed background image that is revealed by mouse hover all over the section

Read more

Auto Change Tabs 2.0

Cloneable
Code
Interactions

A new and improved version for a Tabs element that automatically change tabs

Read more

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more