Create a Gradient Background Effect

Written by @kerixa 21 August 2012

Using color for the background makes your website unique and different from other websites. In the following code, a radial gradient effect is used for the whole page, such that there is a bright green color at center which turns to dark green by going from center to the sides. This code has created a beautiful harmony in the page.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
body {
    background: radial-gradient(lightgreen, darkgreen)
}
</style><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300