What is Linear Gradient in CSS

What is Linear Gradient in CSS

on January 27, 2026

What Is Linear Gradient in CSS

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

Comments