Today’s topic is on a free online tool -
CSS3 Gradient generator free online tool for web developers!
All my friends who out there working as Web developers will find this post pretty useful. Because, this tool is something which will help you save time and energy very often.
Especially, this tool doesn’t only save you time and energy – but also, it saves a lot on your website load time which in turn makes your website load quickly and attract potential users.
How does it save your website load time?
Since CSS3 Gradient generator tool gives you CSS3 styles for the gradient color that you have opted – that will eliminate using an Image for the gradient requirement. The less image you use on your website – the more rapidly your website will load. Isn’t it a cool advantage.
This CSS3 property isn’t fully supported on modern browser’s like Firefox, Chrome, Opera and also IE 9 onwards. Though browsers like IE 8 and below and other older browsers doesn’t support this css3 property – In those browser’s instead of Gradient color you will see a clean solid color – which will be still good to look at.
Getting you started!
- Pick the Top most and Bottom most color of your gradient image using any graphic tool.
- Open colorzilla CSS3 Gradient generator tool online
- You will see the gradient drag-able tool bar as you see in Photoshop with 4 points
- Delete both the points in the middle of the bar
- Double click on the 1st point [Left point] and apply your HEX color code
- Double click on the 2nd point [Right point] and apply your HEX color code
- Choose from Vertical, Horizontal, Diagonal or Radial
As and when you are selecting the options – the tool will dynamically update the Styles on the right hand side.
Once you are done with all the selections:
- Just click on “Copy“ at the bottom of the right side styles section. See the screenshot below.
After you copy – Just paste it into your Style sheet where you want the styles to take effect and your are done. Isn’t this CSS3 Gradient generator a cool one!!
Its not all that guys!!
There are few more features along with this tool which helps you save all your generated gradients for your future use. Wow – isn’t it another cool feature. Yes, it is.
What it does is – It allows you save the generated gradient with a name that you may want to call it and hit save and it will be added to the gradient pallet on the top left. One good thing about that is – when you hit save It stores the gradient in your browser and even after you reload your browser, you can get those old gradient that you saved earlier.
There is another cool feature – After the Styles section towards the right, you can see permalink section – where there is a link named “Unique link“. As the name says – it will create you a unique link to that gradient which you created for your feature use or you can email the links to you friends, colleagues.
Once you click on the Unique Link text in blue – you will a custom URL like one below – which can be shared with others!!
Other features are:
- Hue/Saturation – You can modify the Hue/Saturation as you do in Photoshop.
- Reverse – You can reverse the gradient you just created.
- Import from Image – You can generate gradients by importing gradient Images into this tool.
- Import from CSS – Allows you to import previously created Gradient and amend/alter it.
If you are happy and satisfied with this tool – share your experience and spread this article with you friends, let your friends to make use of these online tools.
Thanks for coming along with this article!