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:

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

Tabs with scrollable (sideways) Menu

Cloneable
Code
Design

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Read more

Contact form as a Chat widget

Cloneable
Code
Tricks

A contact form disguised as a chat widget.

Read more

ToDo List

Cloneable
Code

A todo list, created with JavaScript collected through the internet... ;)

Read more