CSS Styles Shaded Tricolor div with HTML and CSS

Is it possible to make a Shaded Tricolor div with HTML and CSS?

Last updated:7/20/2021 1:05:13 AM

1 Answers

Ethan Karla
Ethan Karla

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!

Answer