How to Add Gradient Text Box in Weebly?

In our previous article we saw how to add colored text box or paragraph in Weebly site. That was a plain color box and there is another type of color text box that use multiple colors for the background. This is referred as gradient and in this article we will discuss how to add gradient text box in Weebly site to spice up your content.

Add Gradient Text Box in Weebly

The gradient text box can be a mixture of multiple colors based on your need. There are two types of gradients:

• Linear gradients which is used to create a color mix in left, right, up, down and diagonal directions.
• Radial gradients which is used to create a color mix from the center.

We will explain both the cases in detail using 3 color mixes.

1. Linear Gradient Text Box

At least two colors are required to create a gradient and the default linear gradient will flow from top to bottom. We will use 3 colors in this example and you can use many colors as you need:

This is a sample text box with 3 colors used. You can use many colors to create a gradient mix.

You can add this linear gradient text box by pasting the below code inside an “Embed Code” element on your Weebly site.

<style>
.linear-gradient {
background: -webkit-linear-gradient(lightgrey, lightyellow, skyblue); /* For Safari */
background: -o-linear-gradient(lightgrey, lightyellow, skyblue); /* For Opera */
background: -moz-linear-gradient(lightgrey, lightyellow, skyblue); /* For Firefox */
background: linear-gradient(lightgrey, lightyellow, skyblue); /* Standard */
padding: 15px;
font-size:20px;
color: red;
margin: 5px;
border-radius:8px;
}
</style>
<p class="linear-gradient">This is a sample text box with 3 colors used.
 You can use many colors to create a gradient mix.
</p>

Note: Change the colors as per your need to create the gradient and the colors by default are distributed equal height.

2. Radial Gradient Text Box

Similar to linear gradient, radial gradient text boxes can also be created with many colors distributed from the center. Here we use 3 colors in our example:

This is a sample text box with 3 colors used in a radial direction (from center to outwards). You can use many colors to create a gradient mix.

Below is the code for radial gradient text box and you can paste it inside an “Embed Code” element:

<style>
.radial-gradient {
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera */
background: -moz-radial-gradient(lightgrey, lightyellow, skyblue); /* For Firefox */
background: radial-gradient(lightyellow, gold, lightgrey); /* Standard */
padding: 15px;
font-size:20px;
color: purple;
margin: 5px;
border-radius:8px;
text-align: justify;
}
</style>
<p class="radial-gradient">
This is a sample text box with 3 colors used in a radial direction (from center to outwards). 
You can use many colors to create a gradient mix.
</p>

Instead of using “Embed Code” you also can paste the code within the style tag under “Pages > Choose the page > SEO Settings > Header Code” section (along with < style > tag. If you are planning to use the gradient text box on multiple pages then paste the code within style tag under ” Theme > Edit HTML/CSS > Styles > main.less” (without < style > tag).

Warning: Internet explorer 9 and below does not support CSS gradient property.

Gradient Buttons

You can also create gradient buttons using similar technique. Below are the examples of two gradient buttons and you can view seven different styles in our demo page. Learn how to add these buttons in Weebly site.