Gradient generator
Build a gradient with clean fallback CSS.
Create linear, radial, conic, or repeating gradients with precise stops, midpoint hints, interpolation, sampled overlay checks, fallbacks, and review-ready CSS.
Free color utility
Gradients
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Quick start
Starter presets
Start with a realistic setup, then adjust any input and watch the result update.
Valid input example: #4169E1, #06D6A0, #FFD166 as a comma-separated stop list
If input is invalid: Unrecognized entries are identified in the announced status, while valid colors remain available for correction or replacement.
Choose a preset or edit the controls directly.
Gradient
Build, preview, and hand off gradient CSS
Instructions
- Pick a stop color, paste concrete CSS color values, or use Swap and Reverse to quickly change the color order.
- Choose a linear, radial, or conic gradient type and select default sRGB or modern color-space interpolation syntax. Authored stop syntax and alpha remain in the modern preview; the fallback resolves stops to sRGB.
- Use Advanced CSS controls to tune generated stop positions, transition midpoints, repeating mode, linear direction, radial shape/size, and center position.
- Review sampled overlay contrast across the stops before placing text on the gradient.
- Copy variables, fallback CSS, a component class, or a handoff summary for your stylesheet.
Paste color list
Advanced CSS controls
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Gradients.
Methodology pages
Related guides
How it fits
Design gradients with accessibility context.
Gradient output includes stop positions, midpoint hints, type-specific geometry controls, interpolation options, fallback CSS, sampled overlay contrast, and copy-ready handoff exports so visual backgrounds stay usable.
Stop controls
Tune color stops, stop positions, transition midpoint hints, swap order, or reverse the gradient direction.
CSS output
Copy variables, fallback CSS, component CSS, or a handoff summary for production review.
Overlay checks
Hue Codex samples the gradient, suggests overlay text, and flags when text should use an overlay or move to a safer region.
Quick overview
Hue Codex Gradient Generator is a free browser-based CSS gradient generator that creates linear, radial, conic, and repeating gradients from three editable color stops. It includes stop position sliders, midpoint hint controls, angle and keyword direction controls, radial shape and center controls, color interpolation syntax options, sampled overlay contrast checks, solid fallback values, and copy-ready CSS variables, fallback CSS, component CSS, and handoff exports.
- Use it to generate linear-gradient(), radial-gradient(), and conic-gradient() CSS from three colors.
- Stop position and midpoint hint sliders let you tune where colors begin, end, and reach the halfway blend.
- Swap and reverse controls make it easier to test color order quickly.
- Use type-specific controls for linear direction, radial shape and center, conic start angle, and repeating output.
- Use modern interpolation syntax when you want more deliberate color movement, and keep the sRGB fallback for broader browser support.
- The output includes CSS variables, fallback CSS, component CSS, and a plain-English handoff summary.
- Overlay text is checked against sampled gradient points; final layouts still need exact placement testing.
What the Hue Codex gradient generator does
The Hue Codex gradient generator creates CSS gradient backgrounds from three editable color stops. You can choose linear, radial, conic, or repeating output, adjust stop positions and transition midpoint hints, and tune the type-specific geometry used by the generated CSS.
The tool is built for practical stylesheet work. It previews the gradient, compares default and modern color interpolation syntax, suggests a solid fallback color, samples overlay text contrast across the gradient, and exports variables, fallback CSS, component CSS, or a handoff summary.
A CSS gradient is an image-like background generated by CSS from two or more color stops. Common gradient functions include linear-gradient(), radial-gradient(), and conic-gradient().
Generated gradient types
Hue Codex supports the three common CSS gradient families used for web backgrounds and visual treatments, plus repeating versions of each. Each type uses the same three color stops and transition hints but distributes them differently.
| Type | Generated CSS | Best use |
|---|---|---|
| Linear | linear-gradient(angle or side/corner, colorA stop, hint, colorB stop, hint, colorC stop) | Hero backgrounds, section bands, cards, buttons, and directional brand treatments. |
| Radial | radial-gradient(shape size at position, colorA stop, hint, colorB stop, hint, colorC stop) | Spotlight effects, soft focal backgrounds, empty states, and central emphasis. |
| Conic | conic-gradient(from angle at position, colorA stop, hint, colorB stop, hint, colorC stop) | Circular accents, color wheels, progress-like visuals, and expressive decorative backgrounds. |
Gradient controls
The generator keeps the first action simple, then exposes the controls CSS gradients actually accept: stop positions, transition hints, type-specific direction or shape controls, repeating output, and color interpolation syntax.
Color A, B, and C
Three color stops define the start, middle, and end of the generated gradient.
Gradient type
Switch between linear, radial, and conic gradient output.
Angle
Adjusts the linear-gradient direction and conic-gradient starting angle in five-degree steps.
Stop positions and midpoint hints
Stop sliders set where each color sits on the gradient line. Midpoint hint sliders set where the transition between two neighboring colors reaches its halfway blend.
Repeating mode
Repeating mode switches the output to repeating-linear-gradient(), repeating-radial-gradient(), or repeating-conic-gradient(). Shorter stop ranges create more visible repeats.
Linear, radial, and conic geometry
Linear gradients can use an angle or direction keyword. Radial gradients can use shape, size, and center position. Conic gradients can use start angle and center position.
Interpolation
Default sRGB interpolation is the broadest compatibility option. Stops may use concrete CSS colors, including alpha values, fixed color names, perceptual functions, and supported color() profiles such as Display P3. Hue Codex preserves authored stop syntax in the modern gradient when the browser supports it, while the fallback resolves stops to sRGB. Selecting sRGB linear, Display P3, A98 RGB, ProPhoto RGB, Rec. 2020, Lab, OKLab, LCH, OKLCH, HSL, HWB, or XYZ changes the interpolation path; it does not turn an sRGB source into a new wide-gamut color.
Swap
Swaps the first two colors so you can test nearby color-order changes quickly.
Reverse
Reverses the outer colors by swapping Color A and Color C.
CSS output
The export panel can create CSS variables, fallback CSS, a component class, or a handoff summary. This makes the generated gradient easier to paste into a stylesheet, share with a teammate, or adapt to your naming system.
- CSS variables store the gradient function type, direction, broad sRGB gradient, modern gradient syntax, fallback color, suggested overlay text, midpoint value, color stops, stop positions, midpoint hints, and center position.
- Fallback CSS writes background-color first, then the broad gradient, then the modern gradient when needed.
- Component CSS adds a starter class for gradient sections with a lightweight overlay layer.
- The handoff summary lists stops, type, interpolation, fallback, suggested text color, weakest sampled contrast, and a production note.
Rename generated custom properties to match your own color-role or component naming conventions before publishing.
Best uses for CSS gradients
Gradients are useful when a flat color needs motion, depth, or brand energy. They work best when they support the content rather than compete with it.
Hero and section backgrounds
Use linear gradients for immersive page sections, announcements, campaign surfaces, and brand headers.
Cards and panels
Use softer radial gradients to create focus without heavy illustration or image assets.
Buttons and accents
Use compact gradients for accent buttons, badges, dividers, and decorative strips.
Exploration and handoff
Copy the generated CSS into mockups, design-system notes, theme files, and project notes.
Overlay text and accessibility caveats
Text over gradients is harder to validate than text over a flat color because contrast changes across the background. Hue Codex samples several points across the generated gradient and chooses the overlay text color with the strongest weakest contrast.
For production layouts, check the exact area behind the text, add a solid or translucent overlay if needed, and avoid placing critical text over high-variation gradient regions.
A passing sampled estimate does not guarantee that every part of the final gradient has enough contrast for every text placement.
Quick answers
Gradients FAQ
What is the Hue Codex CSS gradient generator?
The Hue Codex CSS gradient generator is a free online tool that creates linear, radial, conic, and repeating CSS gradients from editable color stops, stop positions, midpoint hints, direction controls, shape controls, and interpolation options.
Can I generate a linear gradient?
Yes. Choose Linear, then use an angle or direction keyword plus editable stop positions and midpoint hints to generate a linear-gradient() value.
Can I generate radial and conic gradients?
Yes. The generator supports radial-gradient() and conic-gradient() output in addition to linear-gradient(). Radial gradients include shape, size, and center controls, while conic gradients include start angle and center controls.
What does the angle slider change?
The angle slider changes the direction of angle-based linear gradients and the starting angle of conic gradients. Linear gradients can also use a keyword direction such as to right or to bottom left.
Can I control gradient midpoints?
Yes. The midpoint hint controls set where the transition between Color A and Color B, or Color B and Color C, reaches its halfway blend. These are exported as CSS color transition hints.
Can I generate repeating gradients?
Yes. Turn on Repeating gradient to output repeating-linear-gradient(), repeating-radial-gradient(), or repeating-conic-gradient(). Shorter stop ranges usually make the repeat more visible.
Can I copy the generated gradient CSS?
Yes. Hue Codex exports CSS variables, fallback CSS, a component class, and a handoff summary with the function type, direction, stop positions, midpoint hints, interpolation mode, fallback color, suggested text color, and weakest sampled contrast.
Does the generator check text contrast over gradients?
It samples multiple points across the gradient and suggests the overlay text color with the strongest weakest contrast. Text over gradients should still be tested in the actual layout because contrast can vary by placement.
What are Swap and Reverse for?
Swap exchanges the first two colors, while Reverse swaps the first and third colors so you can test color order quickly.
Are gradients good for accessible UI backgrounds?
They can be, but readable text and important controls need careful contrast checks. Use overlays or avoid placing critical text over busy gradient regions when needed.