CSS gradients

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:


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%);


<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.

Further articles on gradients and css animations