Adding Gradient to Elements

Written By Dimitri

On September 5, 2019

Read more

In this blog post, I’ll explain how to add a gradient to multiple different elements throughout your website. It is essential to determine your color scheme so that you can be consistent throughout your site.

In this tutorial ill be using gold colors to make a metallic effect.

#8f6B29, #FDE08D, #DF9F28


First, you must make sure your CSS is compatible with all browsers. I prefer to use this website to ensure compatibility across the board.


For my first example, I will create a gradient border for a text box on the website; the original CSS is:

.gradient-border {
border: 5px solid transparent;
border-image: linear-gradient(to bottom,#8f6B29, #FDE08D, #DF9F28);
border-image-slice: 1;

After plugging into the CSS preprocessor you will get this:

.gradient-border {
border: 5px solid transparent;
-o-border-image: linear-gradient(to bottom,#8f6B29, #FDE08D, #DF9F28);
border-image: -webkit-linear-gradient(top,#8f6B29, #FDE08D, #DF9F28);
border-image: linear-gradient(to bottom,#8f6B29, #FDE08D, #DF9F28);
border-image-slice: 1;

Open up your stylesheets and add the code.

Your Title Goes Here

First example of creating a gradient border for your text box.

As you can see, it is a unique looking effect that adds an element to your website that not many others have.

Next, we’ll add a gradient to text to create a unique looking effect. Using the same process as before, you’ll add this code to your stylesheets.

.gradient-text {
background: -webkit-linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
background-clip: border-box;
background: linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;


Gradient Text Example

Using both of these on a website will create a strong impact on your visitors.


Submit a Comment

Your email address will not be published. Required fields are marked *