CSS3 - Gradients

Gradients displays the combination of two or more colors as shown below −


Curiosity blue


Curiosity blue


Ukraine


Ukraine


Green to dark


Green to dark


Fresh Turboscent


Fresh Turboscent


Koko Caramel


Koko Caramel


Virgin America


Virgin America


Portrait


Portrait


Turquoise flow


Turquoise flow


Vine


Vine


Flickr


Flickr


Instagram


Instagram


Twitch


Twitch


Pastel Orange at the Sun


Pastel Orange at the Sun


Endless River


Endless River


Predawn


Predawn


Purple Bliss


Purple Bliss


Talking To Mice Elf


Talking To Mice Elf


Hersheys


Hersheys


Crazy Orange I


Crazy Orange I


Between The Clouds


Between The Clouds


Metallic Toad


Metallic Toad


Martini


Martini


Friday


Friday


ServQuick


ServQuick


Behongo


Behongo


SoundCloud


SoundCloud


Facebook Messenger


Facebook Messenger


Shore


Shore


Cheer Up Emo Kid


Cheer Up Emo Kid


Amethyst


Amethyst


Man of Steel


Man of Steel


Neon Life


Neon Life


Teal Love


Teal Love


Red Mist


Red Mist


Starfall


Starfall


Dance To Forget


Dance To Forget


Parklife


Parklife


Cherryblossoms


Cherryblossoms


Shadow Night


Shadow Night


Ash


Ash


Virgin


Virgin


Earthly


Earthly


Dirty Fog


Dirty Fog


The Strain


The Strain


Reef


Reef


Candy


Candy


Autumn


Autumn


Winter


Winter


Forever Lost


Forever Lost


Almost


Almost


Moor


Moor


Aqualicious


Aqualicious


Misty Meadow


Misty Meadow


Kyoto


Kyoto


Sirius Tamed


Sirius Tamed


Jonquil


Jonquil


Petrichor


Petrichor


A Lost Memory


A Lost Memory


Vasily


Vasily


Blurry Beach


Blurry Beach


Namn


Namn


Day Tripper


Day Tripper


Pinot Noir


Pinot Noir


Miaka


Miaka


Army


Army


Shrimpy


Shrimpy


Influenza


Influenza


Calm Darya


Calm Darya


Bourbon


Bourbon


Stellar


Stellar


Clouds


Clouds


Moonrise


Moonrise


Peach


Peach


Dracula


Dracula


Mantle


Mantle


Titanium


Titanium


Opa


Opa


Sea Blizz


Sea Blizz


Midnight City


Midnight City


Mystic


Mystic


Shroom Haze


Shroom Haze


Moss


Moss


Bora Bora


Bora Bora


Venice Blue


Venice Blue


Electric Violet


Electric Violet


Kashmir


Kashmir


Steel Gray


Steel Gray


Mirage


Mirage


Juicy Orange


Juicy Orange


Mojito


Mojito


Cherry


Cherry


Pinky


Pinky


Sea Weed


Sea Weed


Purple Paradise


Purple Paradise


Sunrise


Sunrise


Aqua Marine


Aqua Marine


Aubergine


Aubergine


Bloody Mary


Bloody Mary


Mango Pulp


Mango Pulp


Frozen


Frozen


Rose Water


Rose Water


Horizon


Horizon


Lemon Twist


Lemon Twist


Emerald Water


Emerald Water
Man of Steel
Colour 1: #780206
Colour 2: #061161

      Adding a gradient is easy. All gradients are read from a gradients.json file which is available in this project's repo. Simply add your gradient details to it and submit a pull request.
    
You got it. Go make something awesome!

  background: -webkit-linear-gradient(90deg, #780206 10%, #061161 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #780206 10%, #061161 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #780206 10%, #061161 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #780206 10%, #061161 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #780206 10%, #061161 90%); /* W3C */
        
Linear Gradients(down/up/left/right/diagonally)
Radial Gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom.
<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green); 
            background: linear-gradient(pink,green); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html> 
It will produce the following result −
<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left, red , blue);
            background: -o-linear-gradient(right, red, blue); 
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red , blue);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html> 
It will produce the following result −
Diagonal starts at top left and right button.
<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue); 
            background: -o-linear-gradient(bottom right, red, blue); 
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html> 
It will produce the following result −
<html>
   <head>
      <style>
         #grad2 {
            height: 100px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: linear-gradient(red, orange, yellow, red, blue, green,pink); 
         }
      </style>
   </head>

   <body>
      <div id = "grad2"></div>
   </body>
</html> 
It will produce the following result −
Radial gradients appears at center.
<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -o-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%); 
            background: radial-gradient(red 5%, green 15%, pink 60%); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html> 
It will produce the following result −
<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); 
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html> 
It will produce the following result −

    33 Lectures 
     2.5 hours 

 Anadi Sharma

    26 Lectures 
     2.5 hours 

 Frahaan Hussain

    44 Lectures 
     4.5 hours 

 DigiFisk (Programming Is Fun)

    21 Lectures 
     2.5 hours 

 DigiFisk (Programming Is Fun)

    51 Lectures 
     7.5 hours 

 DigiFisk (Programming Is Fun)

    52 Lectures 
     4 hours 

 DigiFisk (Programming Is Fun)
 Print
 Add Notes
 Bookmark this page