ad

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

Step 2 ]

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>
     
  <title> HTML label tag </title>
    </head>

  •   <head>  section 
  •   head section contains metadata about page. not visible on the page itself.
  •  <title> tag  title section set the title of the page shows the browser tab

Step 4]

  <style>
            #grad{
               height:200px;
               background-image:linear-gradient(pink ,red,yellow);
            }                                                                            
        </style>
  •  #grad ID selector in css.
  • selects  HTML element that has id="grad

Step 5]

<body>
                <div  id="grad">
           <h1>Linear Gradient CSS  -- top to Bottom</h1>
             
 <a href="https://webdesigningtheory.blogspot.com/">Web Designing Theory </a>
           
         

  • <body> tag contains everything visible on the web page.
  • Images,links, Text heading all go inside tag.
  • <div id="grad">
  • <div> is block-level container use to group elements.
  • id=" grad" assigns unique identifier to div

<h1>Linear Gradient CSS  -- top to Bottom</h1>

  • <h1> heading tag
  •  displays large ,bold text
  • used for main titles
  • text explains that gradient flows form top to bottom

 <a href="https://webdesigningtheory.blogspot.com/">Web Designing Theory </a>          
 
  • <a> is anchor tag
  • href specifies the destination URL
  • clicking the text open website

Step 6]

   Closing tag

</div>
</body>
</html>

What is Linear Gradient in CSS

Output


What is Linear Gradient in CSS


Related Post :-

introduction to css universal selector
introducation to css syntax
class selectors css

Labels: ,