Gradient text

Gradient text heading 01

To make this effect work for short headings and paragraphs, we need to set them to ‘display: inline-block;’ and ‘width: auto;’.

So it is best to put these element in a group or container to make them fill the block space.

Heading 02

Copy to go here. Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.Copy to go here.

.gradient-text h1,
.gradient-text h2,
.gradient-text h3,
.gradient-text h4,
.gradient-text h5,
.gradient-text h6,
.gradient-text p,
h1.gradient-text,
h2.gradient-text,
h3.gradient-text,
h4.gradient-text,
h5.gradient-text,
h6.gradient-text,
p.gradient-text
 {
    background-color: $color_primary;
    background-image: linear-gradient(45deg, $color_primary, $color_secondary);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    display: inline-block;
    width: auto !important;
}

Search the site

Share this page:

Newsletter

Subscribe to get regular news and updates

  • This field is for validation purposes and should be left unchanged.