Website Building » Wix » How Do You Add a Gradient Color on Wix?

How Do You Add a Gradient Color on Wix?

Last updated on October 1, 2022 @ 1:44 am

Adding a gradient color to your Wix website is simple and easy to do! There are a few different ways that you can go about doing this, so we’ll walk you through each method.

The first way is to use the Wix editor. To do this, simply click on the “Add” button in the left sidebar and then select “Shape.”

GREAT NEWS:

Exciting update! We've collaborated with Wix to offer WBI users with a free plan for all website creation needs - Explore the details here.

From there, you can choose the shape that you want to use and then click on the “Fill” tab. Under “Fill Type,” select “Gradient.” You’ll then be able to adjust the colors, angle, and other settings to get the perfect gradient for your site.

PRO TIP: If you are not familiar with HTML or CSS, we recommend that you avoid adding a gradient color to your Wix website. This can be tricky to do and may result in your website looking broken or unfinished if not done correctly.

Another way to add a gradient color to your Wix site is by using CSS. To do this, you’ll need to add a code block to your site and then paste in the following CSS code:

background: -webkit-linear-gradient(left, #000000, #ffffff);

You can change the colors in this code to whatever you want, and you can also change the direction of the gradient by changing “left” to “right,” “top,” or “bottom.”

Adding a gradient color to your Wix website is a great way to add some visual interest and style to your site. Try out both methods and see which one works best for you!

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.