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
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 / developersection / forums / css styles shaded tricolor div with html and css
Ask Question
Anonymous User
Anonymous User

Software Developer Trainee

I am a content writter !

Message

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