Actual widget output
Design a gradient

Build a CSS gradient and copy the code.

Each example below is the actual published widget running in your browser. Change the colours, type and angle to see the preview and CSS update; nothing is sent anywhere.

This tool needs JavaScript.

Default settings: a blue to red linear gradient with two colour stops, type and angle controls, and Copy CSS.