forum

Home / DeveloperSection / Forums / CSS Styles Shaded Tricolor div with HTML and CSS

Ask Question
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Ethan Karla

Ethan Karla

21-Jul-2021

Yes, you can simply achieve it by linear gradient property of CSS. The linear-gradient() function sets a linear gradient as the background image.

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Let's have a look on the below example : 

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <title>Tricolor Flag</title>

    <style>

        #grad1 {

            height: 200px;

            background-image: linear-gradient(orange, white, green); 
        } 
    </style>
</head>
<body>
    <h3>Linear Gradient - Top to Bottom</h3>
    <div id='grad1'></div>
    <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Hope this information will be helpful for you.

Happy Coding!

MindStick Training

Liked By