7 best Online Gradient Color code generators

Gradient color means two or more shades of color in only one image/background. Gradient color uses vastly on graphic designing, web designing now days and its popularity are increasing fast. In graphic design you can use Photoshop to make this gradient color and in web designing there is lots of online web tool can help you to generate this Gradient CSS3 and CSS color code simply with few mouse clicks and dragging, and of course there is a fun to use these tools, saves times and they are completely free. So read on the best online Gradient color code generator’s list.

7 best Online CSS3 Gradient color code generator

Colorzilla
Very powerful Photoshop like CSS gradient editor and generator with flexible preview panel. Provides features like Cross browser CSS output-Sass output, Horizontal-vertical-diagonal and radial gradients, Hex-rgb-rgba-hsl-hsla color formats, Complex multi stop gradients, Opacity support with multiple opacity stops, More than 135 gradient presets, Adjust gradient by hue-saturation-lightness plus lots more functions.
Colorzilla is pretty complicated gradient color editor, but it is very enrich than other, unlimited possibility that anyone can ever imagine of.

CSS3 Factory
This gradient color generator is very easy to use and output is also neat. This tool has 2 type color format output CSS3 prefix webkit, Gradient Direction (X – Start, Y – Start, X – End, Y – End), multiple gradients and color adding presents. Easy to use and time saver

CSS Matic
The ultimate CSS tools for web designers. This tool offers 25 gradient presets, reverse colors and multi stop gradients, Opacity support with multiple opacity stops, Hue-Saturation-Lightness adjustment, Cross browser supports output, CSS and SASS outputs import from CSS plus more functions.

Angry tools
Easy online CSS Gradient Generator. 45 gradient presets, 5 types of output, various orientations
including linear or radial, rotation option, Locations, reverse colors, Opacity supports, Cross browser capability output.

Microsoft CSS Gradient Background Maker 
Uses color picker and live demo to create CSS background image gradients. Output CSS3 markup has Cross browser supports output of (prefixes: -ms-, -moz-, -o-, -webkit-), 3 type gradient style: Linear-Circular-Elliptical, Start and end locations, Offset, Direction (to bottom right, to bottom, to bottom left, to right, to left, to top right, to top, to top left)

CSS3 Gradient Generator 
Simple CSS3 gradient generator which makes life easy. Start and end locations, rotation option, RGB output, Cross browser capability output.

Free HTML5 templates 
Quick 2 Color CSS3 Gradient Generator. Beginning color and ending color, specify a third-middle color, Direction supports (Top to Bottom, Left to Right, Radial), supports output of (prefixes: -moz, -webkit-).

• And all these CSS3 tools listed here in this article (link) offer's simple and easy Gradient Color generator.

Gradients background gives your site a very stunning look. For website’s background necessary gradients background generally served by photoshoped image what makes you site loading speed bit of sloppy so use CSS Gradients editor and generator to produce your Gradient background save your times, get smarter and explore cooler outlook from the world of colors. What tool you use or will be use don’t forget to mention.

Read More

Add Google Map widget in your Blogger blog

Map is very an important tool for us. The uses of Map are widespread. There is a lot of Blog/website needs to show their physical location for reasons, in that case adding Google Map is the great and only option.

Google Maps is the most effective mapping service available on the internet because

• Google map service is capable of providing directions to any destination and can even calculate the shortest or the least expensive travel route

• 3d street views (satellite imagery to provide users with greater detail of the area)

• The street view is amazingly accurate and precise

• You can get maps of any driving directions to almost any location around the world (Users can save and print the directions. Step by step instructions makes it easier to travel from one destination to another)

• Google Maps also Integrated User Reviews (You can quickly get information and opinions about local hotels and restaurants)

• Plan Routes with Commercial Airline Data and so on.

Adding Google Map in your site is very easy. All you have to is copy below codes, configure and paste into your website’s stylesheet where it will appear. And below How you can add Google Map in your Blogger site explained (Difficulty label is Beginner) The map you are going to add it has

• 3d street views, normal map, satellite, hybrid or terrain view offers

• Superb zooming features

• Almost fast loading

• Scrollable to any direction

Read on-

Add Google Map widget in your Blogger blog

Preview-

Live Demo- (Click here)

Codes for copy-

<!-- crawlist.net map starts-->
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=4100, agrabad,chittagong, bandladesh&layer=tc&t=m&z=10&source=embed&output=svembed"></iframe>
<!-- crawlist.net map ends-->

Another example

<!-- crawlist.net map starts-->
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=Statue of Liberty, Liberty Island, New York, NY 10004, USA&layer=tc&t=m&z=18&source=embed&output=svembed"></iframe>
<!—crawlist.net map ends -->

How to add-

In widget area:

• First log in to your Blogger, select your Blog, 

• Go to 'Layout' tab then click 'add a gadget'  

• Select 'html/javascript' from pop up menu. 

• Copy following codes and configure.

In Post:

• If you willing to use this map into post, follow this process;

• When you writing post switch to HTML, from (Compose/HTML) from the right top of post editor

• Copy following codes and configure.

How to configure-

• q= Enter full address here or latitude+longitude e.g. (street name, city, county/state, country)

• layer= (t = traffic | c = streetview | tc = both) - show map layer type

• t= (m = normal map | k = satellite | h = hybrid | p = terrain) - Sets the kind of map shown

• z= (1 - 23) - map zoom level. 23 value indicates fully zoomed in. (default is 18)

• Width is 300px and height is 300px change with your custom size.

• Change these with you data, save template. See your map live action.

For business website's adding a map is very necessary. It can increase your business and customer satisfaction. Visitor quickly understand where they needs to go and what is their position right now. So add Google map to your blogger blog any question, feedback don't forget to mention. Goodluck

Read More

Share with count + Feedburner Subscription widget below posts in Blogger

For running a Blogger's blogsite you will need to use various widget for enhancing your blog outlook, performance and user satisfaction. Feedburner subscription box and Social sharing widget are one of those must have widget for your site. Feedburner subscription box help you to get email subscriber and deliver your latest posts straight to subscribers email inbox and sharing a post on various social media services can increase your blog’s visitor by visitor. With Crawlist several time I published both subscription box and Social sharing widget for you. But first time ever I publishing a widget what got both (Subscription box and Social sharing) into a single widget, Simple and don’t waste lot’s of place. This widget got Social sharing with count (Facebook, Twitter, Google plus) and Addthis service what integrated with more than 290 social media sharing service. And Feedburner email subscription what enhanced with HTML5, CSS3, Gradient deigned, Key-frame animation. Don’t want to talk more let’s add this compact simple but extra-ordinary social sharing and email subscription widget in your Blogger blog.

Share with count + Feedburner subscription widget below posts in Blogger

Preview-

Live demo- (Click here)

How to add this widget in your Blogger:
This widget set up has two simple step rean on:

Back up your template (Optional step)

• Log in to your blogger, select your blog, 

• Select 'Template' tab option, click 'backup/restore' from upper right corner. 

• Download full template and save it on your pc's Hard drive

Installing widget (Mandatory step)

• From 'Template' tab, select 'Edit html' 

• Find (using Ctrl+F or Cmd+F) this line-

<div class='post-footer-line post-footer-line-1'>

• You may find this code phrase twice, ignore first phrase, after second phrase paste these codes- 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
.ks-share {height:90px; width:515px; border:#ccc 1px solid; border-radius:5px; padding:5px 5px;background:#f5f5f5;margin:auto;}
.ks-share:hover {background:#fff;border:#CCC 1px solid;}
.ks-boxer {float:left; height:80px; width:250px;}
.ks-boxed {height:70px; width:53px; padding:10px 2px; float:left;margin-top:2px;}
.ks-boxer h4 {font:sans-serif; font-size:15px; text-align:center; color:#666; margin-top:-5px; margin-bottom:-3.5px;margin-left:3.5px; }.ks-boxer h4:hover { color:#09F;}
.ks-feedbaba {height:60px; width:250px; float:right; }
.ks-feedbaba h4 {font:sans-serif; font-size:15px; text-align:center; color:#666; margin-top:-5px; margin-bottom:5.5px;margin-left:3.5px; }
.ks-feedbaba h4:hover { color:#09F;}
.ks-feedbabat {height:43px; width:235px; background:#000; padding:5px 5px; border-radius:5px;margin-top:12px;}
.ks-feedbab {background: #222;
    background: -webkit-linear-gradient(#333, #222);   
    background: -moz-linear-gradient(#333, #222);   
    background: -o-linear-gradient(#333, #222);   
    background: -ms-linear-gradient(#333, #222);   
    background: linear-gradient(#333, #222);   
    border: 1px solid #444;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 2px 0 #000;
    color: #888;
    display: block;
    float: left;
    font-family:helvetica;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #000;
    width:140px;}
   
.ie .ks-feedbab input {
    line-height: 40px;
}
.ks-feedbab input::-webkit-input-placeholder {
   color: #888;
}
.ks-feedbab input:-moz-placeholder {
   color: #888;
}
.ks-feedbab:focus {-webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
    background: #222922;
    background: -webkit-linear-gradient(#333933, #222922);
    background: -moz-linear-gradient(#333933, #222922);
    background: -o-linear-gradient(#333933, #222922);
    background: -ms-linear-gradient(#333933, #222922);
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}
.ks-feedbab input:focus::-webkit-input-placeholder {
    color: #efe;
}
.ks-feedbab input:focus:-moz-placeholder {
    color: #efe;
}

@-webkit-keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow {
    0% {
        border-color: #0CF;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #0CC;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}
.ks-feedba {background: #222;
    background: -webkit-linear-gradient(#333, #222);
    background: -moz-linear-gradient(#333, #222);
    background: -o-linear-gradient(#333, #222);
    background: -ms-linear-gradient(#333, #222);
    background: linear-gradient(#333, #222);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #444;
    border-left-color: #000;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 0 #000;
    color: #fff;
    display: block;
    cursor:pointer;
    float: left;
    font-family:helvetica;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width:70px;
}   
.ks-feedba:hover,
.ks-feedba:focus {
    background: #292929;
    background: -webkit-linear-gradient(#393939, #292929);   
    background: -moz-linear-gradient(#393939, #292929);   
    background: -o-linear-gradient(#393939, #292929);   
    background: -ms-linear-gradient(#393939, #292929);   
    background: linear-gradient(#393939, #292929);
    color: #0CF;
    outline: none;
}
.ks-feedba:active {
    background:  #292929;
    background: -webkit-linear-gradient(#393939, #292929);
    background: -moz-linear-gradient(#393939, #292929);
    background: -o-linear-gradient(#393939, #292929);
    background: -ms-linear-gradient(#393939, #292929);
    background: linear-gradient(#393939, #292929);
    box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
    top:1px;
}/*crawlist.net CSS ends*/
</style>
<!--crawlist.net widget starts-->
<div class='ks-share'><div class='ks-boxer'><h4>Share this post</h4>
<div class='ks-boxed'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/>
</div>
<div class='ks-boxed'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='ks-boxed' style='margin-left:7.5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/>
</div>
<div class='ks-boxed'>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;crawlist&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
  </div></div>
<div class='ks-feedbaba'>
<h4>Never miss a post (Subscribe)</h4>
<div class='ks-feedbabat'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedId&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=500&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ks-feedbab' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email'/>
 <input class='ks-feedba' title='' type='submit' value='Submit'/>
</form></div></div>
</div><!--crawlist.net widget ends-->
</b:if>

Configuring

• You need to add your Feedburner email subscription manually, Collect your website's feedburner feed Id and replace ‘FeedId’ your feed id you can find here (http://feeds.feedburner.com/your feed id) it pink colored.

• Save your template and check out your Blogger blog.

Template Compatibility and Faq
This widget is compatible with almost all stranded templates but unique designed templates or highly coded templates will not accept this like.
If widget didn't shows up; you may try this; search for </article> in stead of <div class='post-footer-line post-footer-line-1'> and after </article> copy and paste those codes.

So I think this widget working properly on your site and it will boost your social sharing and subscribers. What you think about this widget don’t forget to mention, any question, recommendation, problem or feedback leave with comment. Goodluck and Happy blogging :)

Read More