---
title: "CSS Styles Shaded Tricolor div with HTML and CSS"
description: "CSS Styles Shaded Tricolor div with HTML and CSS"
author: "Anonymous User"
published: 2021-07-20
updated: 2021-07-20
canonical: https://www.mindstick.com/forum/156545/css-styles-shaded-tricolor-div-with-html-and-css
category: "html"
tags: ["css-css3", "html5", "design patterns"]
reading_time: 1 minute
---
# CSS Styles Shaded Tricolor div with HTML and CSS
Is it possible to make a Shaded Tricolor div with [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) and [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem)?
## Replies
### Reply by 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 :
```
Tricolor Flag
Linear Gradient - Top to Bottom
Note: Internet Explorer 9 and earlier versions do not support gradients.
```
Hope this information will be helpful for you.
Happy Coding!
---
Original Source: https://www.mindstick.com/forum/156545/css-styles-shaded-tricolor-div-with-html-and-css
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.