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;
}