Table of Contents
- Introduction
- Features
- How It Works
- Modes
- Built With
- Why did I build this?
- Contributing
- Wait a minute, who are you?
- License
- Changelog
Gradie is a design tool that extracts the most prominent colors from an image and turns them into a smooth, beautiful gradient.
These features can change at any time. Their existence depends on me having enough time or motivation to implement them all tbh.
- 🖼️ Upload or paste any image (drag & drop, file select, camera on mobile, or paste directly)
- 🎨 Extracts dominant colors from the uploaded image
- 🌈 Creates a smooth gradient using the extracted palette
- 🔄 Multiple gradient types (linear, radial, conic)
- 🎯 Advanced gradient controls (angle adjustment, radial shapes, positioning)
- 🔧 Offers multiple gradient strategies, detailed below
- 📁 Works with uploaded files or pasted images
- 📋 Copy gradient as CSS
- ⚙️ Download gradient as image
⚠️ Smart error handling and file validation
- You upload or paste an image.
- Gradie extracts a palette of the most prominent colors.
- The first color in the palette is considered the dominant color.
- You choose a Gradie Mode (see Modes for all modes).
- Customize your gradient with advanced controls like angle, position, and shape options.
- Gradie generates a smooth gradient using your selection.
- You export it as CSS or download the image.
Gradie supports several modes for generating gradients from your image. Each one starts with the most prominent color (palette[0]) and builds from there.
| Mode Name | Description |
|---|---|
| Default | Most prominent color + second-most prominent. |
| Surprise Me! | Most prominent color + a random pick from the rest of the palette. |
| Bold Pop | Most prominent color + the most visually contrasting color in the palette. Great for high-impact, energetic gradients. |
| Soft Sweep | Most prominent color + the palette color with the most different hue. |
| Full Blend | Uses all five palette colors to create a multi-stop gradient. |
| Custom | You choose any two colors from the extracted palette to create your own combo. |
I saw a nice-looking image, thought the colors in it would look nice as a gradient background, and here we are!
(The image is the cover art for mike's the lows. album, if you're wondering 🫡)
Contributions are welcome! If you'd like to improve Gradie, please feel free to submit a pull request.
Hello there! I'm Emmanuel Jemeni, and I am a Frontend Developer.
You can find me on various platforms:
If you'd like, you can support me on GitHub Sponsors or Buy Me A Coffee.
