How To Boost Your Website With Beautiful Gradient Background




We are so fortunate because we live in the age where we can literally create our own website within minutes.
Thanks to WordPress, you can create simple blog or website for free without paying to web developers.
WordPress offers thousands of free theme designs you can use on your website. But sometimes they are not enough and you would like to enhance your blog with something more.
With this post, I will show you how to boost your website with beautiful gradient background.

It takes less than 5 minutes however, such a small change can transform your website dramatically.
You won’t believe your own eyes.
This post refers to the same simple process of changing the CSS as I previously described here where I showed how you can change the color and style of headings on your blog.

Let’s do it!

Get the gradient you like

Go to https://uigradients.com where you can choose from many beautiful gradients. Just slide through them and choose the one you really love.

I chose the “Honey Dew”: https://uigradients.com/#HoneyDew

Once you have chosen, click on the <> “get the css” symbol in the upper right menu. Copy the code and load your website home page.

Open your background in developers console




Navigate your mouse on the background of your website or blog. It should be somewhere below the header next to the main content.

In my case, it is quite obvious where I should click – my background is white, but well distinguished from the other content.

Right-click and select “Inspect” (This works using Google Chrome).

How To Boost Your Website With Beautiful Gradient Background, how to change the color of background, how to change the color of background in WordPress, change background using css, edit background color, how to change background color wordpress, gradient background, how to create gradient background,

The developers’ console should open on the bottom of your website pointing out the HTML code on left and CSS code on right.

Do you see there the color of your current background?

There should be something like this:

#main {
 padding-top: 30px;
 padding-bottom: 20px;       
background: #ffffff;
}

The #main selector specifies the area of the website between header and footer which contains the main content.
The CSS code, in fact, is the supplement code which creates a design of website built using the HTML. In other words, with HTML you create a website structure, and with CSS you create the design of this structure.

Note: Your selector which points out the color of your background may be called differently, depending on what theme you use.

Now click on the color next to the “background” and replace it with the gradient code you have previously copied.
Simply highlight the color of background and type CTRL+V to paste there your copied CSS code of gradient.

How To Boost Your Website With Beautiful Gradient Background, how to change the color of background, how to change the color of background in WordPress, change background using css, edit background color, how to change background color wordpress, gradient background, how to create gradient background,

The changes should appear immediately on the website. How does it look, do you like it? You can try and play with this until you will become completely satisfied with the result.

These changes do not transform the appearance of your website in real. It is only a local change which will disappear once you refresh the page.
You have to copy this code with everything including curly brackets and selector and go to your WordPress customizer to edit the CSS.

The whole code you need to copy should look like this:

#main {
       padding-top: 30px       padding-bottom: 20px       background: #43C6AC       background: -webkit-linear-gradient(to right, #F8FFAE, #43C6AC);
       background: linear-gradient(to right, #F8FFAE, #43C6AC);
}

 

How To Boost Your Website With Beautiful Gradient Background, how to change the color of background, how to change the color of background in WordPress, change background using css, edit background color, how to change background color wordpress, gradient background, how to create gradient background,

Edit Your CSS




Go to your dashboard and navigate to Appearance → Customize.
Or simply use the admin bar on the top and click on the “Customize”.

Select the “Additional CSS” and paste your copied code here.

How To Boost Your Website With Beautiful Gradient Background, how to change the color of background, how to change the color of background in WordPress, change background using css, edit background color, how to change background color wordpress, gradient background, how to create gradient background,

Don’t forget to delete the code which does not specify your background changes. In my case, I deleted padding-top and padding-bottom values, as I didn’t want to change these values. This code, therefore, is useless and should be removed.
Leave only the values which refer to the background changes.

This is the clean formula which should stay at the CSS editor at the end of this attempt:

#main {
       background: #43C6AC       background: -webkit-linear-gradient(to right, #F8FFAE, #43C6AC);
       background: linear-gradient(to right, #F8FFAE, #43C6AC);
}

If the changes appeared on the page immediately, save your changes.
Your website or blog should now have changed background.

Did you manage to successfully edit your background? Comment with your link to show me how you transformed the design of your website.
And of course, in case you had any problems during the process, let me know if I can help.

 


Was this post helpful to you? If yes, you can “buy me a #covfefe” and help me to manage the costs of this website 🙂

Thanks!

barbaria

Barbaria is a web developer, web designer, and travel blogger. She's obsessed with digital matters, especially creating websites. She also loves to learn new skills. Many of these skills she gained online through the tutorials. That's why she decided to share her own skills with others too. And help other people learn new things and fulfill their dreams.