ad

Showing posts with label Linear Gradient in CSS. Show all posts
Showing posts with label Linear Gradient in CSS. Show all posts

Tuesday, January 27, 2026

What is Linear Gradient in CSS

What Is Linear Gradient in CSS

web designing theory
What is a Linear Gradient in CSS

linear Gradient in  CSS function  that creates a smooth transition between 
Two or more colors along a straight line 
 linear gradient is treated as background image,not a background color.
Defined using the linear-gradient() function in CSS
Direction controls how colors flow (top,bottom,left,right or diagonal)
linear gradients use  angles such as 45deg ,90deg,180deg
Angles rotate clockwise starting from bottom to top at 0deg
At least two colors are required to create a linear gradient.
Multiple color to create  rich gradient effects
Each color in gradient is called  a color stop
Linear gradients are resolution-independent and scale prefectly on all devices

 They are widely used for buttons,headers , banners and background 

What is Linear Gradient in CSS

Syntax 


    background:linear-gradient(direction, color1, color2,color3 ...);

Why Use Linear Gradients?

✔ Easy to customize
✔ No Images required
✔ Improves Ul design
✔ Supported by all modern browsers
✔ Fully responsive

What is Linear Gradient in CSS
Example 

<!DOCTYPE html>
   <html>
    <head>
        <title> css element selector</title>
            <style>
            #grad{
               height:200px;
               background-image:linear-gradient(pink ,red,yellow);
            }                                                                            
        </style>
            </head>
            <body>
                <div  id="grad">
           <h1>Linear Gradient CSS  -- top to Bottom</h1>
             
 <a href="https://webdesigningtheory.blogspot.com/">Web Designing Theory
<br> https://webdesigningtheory.blogspot.com/ </a>
           
           <P> learn programming language css  </P>
           </div>
            </body>
    </html>

What Is Linear Gradient in CSS

Explain Program

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html