Adding gradient to an elementor text,
add the following code into “Advanced/Custom css” of the element’s property panel:
selector {background: rgb(62,100,112);background: linear-gradient(90deg, rgba(62,100,112,1) 0%, rgba(137,214,219,1) 80%);-webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Note: For headers throughout the site go to Appearance/Customize/Aditional CSS and use similar code for the releavant header: h1, h2, h3 etc.
Highlighted "Note" box with gradient:
CSS:
span.highlight {
display: inline; /* the default for span */
padding: 5px;
margin: 5px;
color: #1c1c1c;
border-radius: 15px 20px 12px 6px ;
background: rgb(97,154,164);
background: linear-gradient(90deg, rgba(97,154,164,1) 0%, rgba(76,119,126,1) 80%);
}
HTML:
<span class="highlight">Note: </span>Animated button corners
While experimenting with the gradients in buttons I realized it would be fun to animate the roundness of the button corners to give a more “organic” feel to the site.
There is a great post at chrisruppel.com about this, which helped working on the idea.
