Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums CSS Styles Shaded Tricolor div with HTML and CSS – MindStick
Ask Question

1 Answers

Ethan Karla
Ethan Karla 21 Jul 2021
Report Abuse

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
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md