Blend Your Own CSS Gradients with This Free Web App

By Jake Rocheleau. in Toolkit. Updated on July 15, 2022.

Every web designer should know about CSS3 gradients. They’ve been around for years and they’re widely supported by all major browsers.

And now, free web apps such as Blend let you create CSS3 gradients on the fly with in-browser visual editors. You can choose between linear & radial gradients while tinkering with colors to blend.

The initial page loads with two solid colors on either side. You can use the color palette to flip between hues or enter a manual HEX code if you know the color you want. Once you’ve got two colors you like, click the “Let’s blend” button in the center.

Read Also: CSS3 Linear Gradients [CSS3 Tips]

Both colors blend together into a CSS3 gradient with editable options near the top of the page. You can choose between linear gradients & radial gradients, and if you’re using the linear style you can drag the center location all across the page.

Plus, while you’re in blend mode you can still go back to change the colors at the bottom. This is like the perfect code-free CSS3 gradient generator that every designer needs.

Once you have two colors you like, you can click the code bracket icon in the top-right corner. This brings up a window with CSS code that you can copy/paste into your stylesheets.

Blend is a free tool created by NYC designer Colin Keany. It’s also hosted on his site, although I do not see a link to GitHub or any free source code anywhere. But he did write a case study detailing his process creating Blend with all its handy features.

Unfortunately, the current version does not support more than two colors. But I’m crossing my fingers for multi-color options in the future.

Since you can’t download a local copy, I recommend bookmarking Blend for future use. It’s the perfect way to test gradients without repeatedly editing your stylesheet.

And, if you want to share your ideas or just say thanks for this gradient tool you can tweet Colin @colinkeany.