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