Gradient Color

Gradient color என்பது இரண்டு அல்லது அதற்க்கு மேற்பட்ட வண்ணங்களுக்கு இடையே மென்மையான மாற்றங்களை display செய்வதே gradient color.

இரண்டு வகையான gradients உள்ளன. அவை பின்வருமாறு:

  • Linear Gradients (goes down,up,left,right,diagonally)
  • Radial Gradients (அதன் மைய பகுதியில் apply செய்யபடுகிறது)

CSS Linear Gradient

ஒரு gradient color-ஐ உருவாக்க குறைந்தது இரண்டு colors அவசியம் தேவைபடுகிறது. இதில் gradient effect-உடன் starting point and a direction (அல்லது an angle) குறிப்பிடவேண்டும்.

Syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

(or)

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (default)

இது மேலிருந்து கீழாக color-ஐ மாற்றி கொண்டே மற்றொரு color-ஆகா மாறிவிடும். green color to lightblue

Example

Try this code 
<style>
    .default-gradient{
        background-image:linear-gradient(green,lightblue);
        height: 100px;
        padding: 20px;
    }        
</style>
<div class = "default-gradient"></div>
Default Gradient

Linear Gradient - Left to Right

Example

Try this code 
<style>
    .left-right{
	background-image:linear-gradient(to right, green,purple,red);
     	height: 100px;
    	padding: 20px;
    }
</style>
<div class = "left-right"></div>
left-right

Linear Gradient - Diagonal

Example

Try this code 
<style>
    .diagonal{
	background-image:linear-gradient(to bottom right, purple,red);
    	height: 100px;
   	padding: 20px;
    }
</style>
<div class = "diagonal"></div>
Diagonal

Using Angles

Example

Try this code 
<style>
    .angle{
	background-image:linear-gradient(-90deg, black, orange);   		
        height: 100px;
    	padding: 20px;
    }
</style>
<div class = "angle"></div>
Using Angle

Repeating a linear-gradient

Example

Try this code 
<style>
    .repeating-linear{
	background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
    	height: 300px;
    	padding: 20px;
    }
</style>
<div class = "repeating-linear"></div>
Repeating a linear-gradient

CSS Radial Gradients

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Example

Try this code 
<style>
    .radial1{
	background-image: radial-gradient(red, yellow, green);
    	height:300px;
    	padding: 20px;
    }
</style>
<div class = "radial1"></div>
Radial Gradient 1

Example

Try this code 
<style>
    .radial2{
	background-image: radial-gradient(red 5%, yellow 15%, green 60%);
    	height:300px;
    	padding: 20px;
    }
</style>
<div class = "radial2"></div>
Radial Gradient 2

Shape Radial Gradients

Example

Try this code 
<style>
    .circle{
	background-image:radial-gradient(circle, red, yellow, green);
    }
</style>
<div class = "circle"></div>
Shape Radial Gradients

Repeating a radial-gradient

Example

Try this code 
<style>
    .repeating-radial{
    	background-color: red;
    	background-image: repeating-radial-gradient(red, yellow 15%, green 10%);
    	height:300px;
    	padding:20px;
    }
</style>
<div class = "repeating-radial"></div>
Repeating a radial-gradient

Comments