Live gradient preview
Generated result
Gradient controls
Color stops
Selected color details
Text and accessibility preview
Contrast checks use the weakest stop estimate. Complex gradients can vary between stops.
Background and animation settings
Generate and export
Import existing gradient
Gradient presets
History and favorites
Example gradient data
| Preset | Type | Direction | Colors | Typical use |
|---|---|---|---|---|
| Sunset | Linear | 135° | #ff9966 → #ff5e62 | Hero sections |
| Ocean | Linear | 120° | #00c6ff → #0072ff | Buttons and cards |
| Neon | Conic | 0° | #00f5a0 → #00d9f5 → #7b2cff | Decorative accents |
Formula used
CSS gradients combine a gradient function with ordered color stops. Each stop includes a color and optional position.
linear-gradient(angle, color position, color position) creates a directional blend. Radial and conic functions use shape or center settings.
How to use this calculator
- Choose a gradient type and direction.
- Add colors and drag their stops.
- Adjust opacity position and interpolation.
- Preview text contrast and animation.
- Copy code or export your configuration.
Gradient design guide
CSS gradients blend colors without requiring separate image assets. They scale smoothly across responsive layouts and high resolution displays. Designers often use them for backgrounds buttons cards and text.
Linear gradients move colors along one directional axis. The angle controls how that axis crosses the element. Color stops define where individual colors appear during the transition.
Radial gradients expand outward from a chosen center point. Circle and ellipse shapes create noticeably different visual proportions. Size keywords control how quickly the gradient reaches container edges.
Conic gradients rotate colors around a central point. They work well for decorative rings charts and vivid backgrounds. Starting angle settings help align important colors with nearby elements.
Repeating gradients restart the pattern after their final stop. They can create stripes rays grids and other repeated effects. Close stop positions usually produce tighter repeated patterns.
Opacity makes gradients useful over photographs and layered backgrounds. Transparent stops should still use carefully selected underlying colors. This avoids unexpected blending when backgrounds change later.
Color interpolation can change the character of a transition. Oklab often produces perceptually smoother blends between strongly different colors. Browser support should be checked before relying on advanced spaces.
Readable text needs enough contrast against every important area. A beautiful gradient can still reduce accessibility significantly. Test both dark and light text before publishing designs.
Animated gradients create motion by changing background position over time. Large background sizes make that movement easier to notice. Slower durations usually feel calmer for interface backgrounds.
Text gradients should remain decorative rather than essential information. Some environments may render clipped text techniques differently. Always keep meaningful content available to assistive technologies.
Presets are useful starting points instead of fixed final designs. Adjust angles stops and opacity for your specific layout. Save successful combinations when building a reusable design system.
Imported gradients can speed up editing existing project styles. Complex CSS syntax may require small manual corrections afterward. Review generated code before placing it into production stylesheets.
History makes experimentation safer because earlier versions remain available. Favorites provide a smaller collection for approved visual directions. JSON exports can also preserve settings outside the browser.
PNG exports are convenient for sharing previews with collaborators. CSS remains preferable when the gradient belongs in websites. Vector-like browser rendering keeps gradients crisp at every size.
Use restrained palettes when gradients support important interface actions. Strong saturation works better when used deliberately and sparingly. Subtle transitions can add depth without distracting users.
Thoughtful gradients can make interfaces clearer and more memorable.
Browser compatibility guidance
Linear radial conic and repeating gradients work in modern browsers. Advanced interpolation syntax can have more limited support.
Frequently asked questions
Can a gradient use more than two colors?
Yes. Add as many color stops as your design requires.
Can gradients include transparency?
Yes. Each stop has its own opacity control.
Can I animate a CSS gradient?
Yes. This tool can generate background position keyframes.
Can I reuse a saved gradient later?
Yes. History and favorites are stored locally in your browser.