Colour Picker
Pick colours from an image and copy their HEX, RGB and HSL values.
DESIGN TOOLS
Gradient Generator
Create a two-colour gradient with live preview, CSS and PNG export.
Gradient Generator settings
background: linear-gradient(90deg, #2169F5, #F4F7FF);How to use Gradient Generator
- 01
Choose a starting point
Use the example settings, enter your values or select an image where supported.
- 02
Adjust and review
Choose two colours, adjust the angle and set your export dimensions. Copy the CSS or save a PNG.
- 03
Copy or download
Preview the generated result, then copy the displayed values or download the file using the available controls.
The preview and PNG use the same linear gradient direction. CSS scales to fit the element where you use it.
Explore more Design Tools
