Five Gradient Style Labels Widget for your Blogger Templates

Here I am going to share a tricks about Gradient Style labels for your Blogger Templates. I have shown here 5 Gradient style labels that will suit for your website. Each Gradient Label mashed up by 2 colors that will looking cool and makes your Blog Labels exceptional.  

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
 

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Widget" then select "Label" Widget.

Step 4 Now click on -> Template -> Edit HTML

Step 5 Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 6 Copy any code from below and Paste the code  Before/above ]]></b:skin>

  Gradient Label 1

#Label1 a{background:#FEB380;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#FED9BF), to(#FEB380));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#FED9BF), to(#FEB380));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

Gradient Label 2

 

#Label1 a{background:#CCFF00;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F2FEBF), to(#E6FE80));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F2FEBF), to(#E6FE80));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

Gradient Label 3

#Label1 a{background:#99FE80;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#BFFEBF), to(#80FE80));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#BFFEBF), to(#80FE80));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

Gradient Label 4

 

#Label1 a{background:#000000;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#000000), to(#000000));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#000000), to(#000000));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

Gradient Label 5

 

#Label1 a{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;display:inline-block;font-family:cooper;font-size:12px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

Step 7 Now Save your templates and check your blog for multicolored labels.