Quickly create nice CSS gradients with the CSS Gradient Creator

This CSS Gradient Generator by Josh W Comeau is a very good, simple Web App that helps you to create "Beautiful, lush gradients".

{% Img src="image/rq1kLlxRBubsZSyX0gs2nghLSZc2/CGKiSTSDSv30GLu7JuQR.png", alt="A screenshot of the Gradient Editor with a simple linear gradient.", width="800", height="693" %}

I personally struggle mapping the syntax to a visual so this tool has been a great help for me. It focuses on creating linear gradients and it allows you to configure them using a number of different color modes (like HCL) even though they aren't directly supported on the linear-gradient CSS function. Josh's supporting blog post goes into more detail about how the color interpolation is calculated and applied to something the browser can render—it's a fascinating read into some of the theory behind how it works.

Linear gradient

{% BrowserCompat 'css.types.image.gradient.linear-gradient' %}

Hero image by Luke Chesser on Unsplash