Ultimate CSS Gradient Generator

Puneet Sharma

7 years ago

Create a great CSS gradient with simple two-color code or multiple color points with this free online super cool CSS Gradient Generator Tool.

Tool Link – https://tools.webdevpuneet.com/css-gradient-generator/

Here is a full-page screenshot of the tool.

This tool also has some preset gradients as an example to start with and modify them according to your requirements.

Presets Gradients to start with as examples

Here is an example of CSS output I got from this tool:

.gradient {
    background-color: #cc8dd2;
    /* IE9, iOS 3.2+ */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1OSUiIGN5PSIxNDclIiByPSIxODMuNCUiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2U1NDRjNiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNyIvPjxzdG9wIHN0b3AtY29sb3I9IiMwNDc2OTQiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
    background-image: -webkit-gradient(radial, 59 147, 0, 59 147, 531,color-stop(0, rgb(255, 255, 255)),color-stop(0.7, rgb(229, 68, 198)),color-stop(1, rgb(4, 118, 148)));
    /* Android 2.3 */
    background-image: -webkit-radial-gradient(59px 147px, 531px 531px,rgb(255, 255, 255) 0%,rgb(229, 68, 198) 70%,rgb(4, 118, 148) 100%);
    /* IE10+ */
    background-image: radial-gradient(circle 531px at 59px 147px,rgb(255, 255, 255) 0%,rgb(229, 68, 198) 70%,rgb(4, 118, 148) 100%);
    background-image: -ms-radial-gradient(59px 147px, 531px 531px,rgb(255, 255, 255) 0%,rgb(229, 68, 198) 70%,rgb(4, 118, 148) 100%);
}
 
/* IE8- CSS hack */
@media \0screen\,screen\9 {
    .gradient {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffffff",endColorstr="#ff047694",GradientType=0);
    }
}

You can even pop out the gradient view window to check how it will look like on bigger screens like in the image below:

Gradient view window popped out and enlarged

You can even download the png image of your unique gradient on a click of this button (screenshot below) that you can use as a background image or for any other purpose if you want.

Download the png gradient image with a button click

Here are some gradient images created with this tool: You can create liner as well as radial gradient CSS codes and images with this tool:

Tool Link – https://tools.webdevpuneet.com/css-gradient-generator/