CSS Gradient Generator
Build linear or radial gradients with up to 5 color stops. Copy the CSS, download a PNG swatch, or use the hex codes directly in GIMP.
Gradient Presets
Using Gradients in GIMP
Once you have the hex codes from your gradient, you can recreate it exactly in GIMP:
- Select the Blend Tool (keyboard shortcut L).
- Click the gradient preview in the Toolbox to open the Gradient Editor.
- Create a new gradient and add color stops matching your hex values.
- Double-click each stop to enter an exact hex code via the HTML notation field.
- Drag the Blend Tool across your canvas to apply the gradient.
Saving Custom Gradients
In GIMP 3.x, go to Windows → Dockable Dialogs → Gradients, right-click your custom gradient, and save it as a .ggr file. This lets you reuse it across projects.
Gradient Map for Photo Effects
Use Colors → Gradient Map to recolor an entire image using a gradient. Dark tones map to the first color, light tones to the last - Great for duotone and vintage effects.
Gradient Recipes for GIMP Projects
| Project | Gradient type | Tip |
|---|---|---|
| Button or banner background | Linear | Keep the angle subtle so text remains readable. |
| Spotlight or vignette | Radial | Put the lighter color near the subject and fade outward. |
| Color wheel or badge | Conic | Use hard color stops for crisp segments. |
| Duotone photo effect | Linear gradient map | Choose one dark tone and one highlight tone before mapping. |
Before exporting a graphic, run foreground text colors through the color contrast checker. Gradients can pass in one corner and fail in another, especially when light text crosses a pale stop.
Popular Gradient Recipes (Copy the Hex Values)
Recreate any of these in the generator above by entering the hex stops, or use them directly in GIMP's Gradient Editor for backgrounds, text fills, and gradient maps.
Sunset
#ff7e5f to #feb47b
Clear Sky
#00c6ff to #0072ff
Fresh Mint
#11998e to #38ef7d
Deep Violet
#8e2de2 to #4a00e0
Neon Pink
#f953c6 to #b91d73
Graphite
#232526 to #414345
Metallic Gold
#704214, #ffd700, #fff0a0, #704214
GIMP Wilber
#e8890c to #4a90d9
The Metallic Gold recipe is the exact gradient used in our gold text effect tutorial. For matching text and background colors that stay readable, check pairs in the contrast checker.
Related Tutorial
Understand how blending modes interact with gradients and layers to produce creative compositing effects.