Who this helps
- Designers building cards and hero sections
- Developers learning CSS gradient syntax
Developer Design Utility
CSS Gradient Generator
Create linear-gradient, radial-gradient, and conic-gradient CSS background code by adjusting colors, direction, type, and color stop positions with a live preview.
Gradient Code Generator
Generate CSS background code for linear, radial, and conic gradients instantly.
Live Preview
Changes to colors, angle, and position values are reflected immediately in the preview background.
Copy and Download
Copy selector code, CSS variables, and background properties, or save the result as a CSS file.
Gradient Type
Linear
Angle
135°
Color Stops
0% / 100%
Output
background
STEP 1
Gradient Settings
Combine gradient type, colors, angle, and target selector to create the CSS background code you want.
Choose a linear, radial, or conic gradient.
0°
135°
360°
Used as the direction or rotation base for linear and conic gradients.
This is the starting color. You can enter a HEX color code.
This is the ending color. For UI that needs contrast, check the brightness difference.
0%
0%
100%
0%
100%
100%
Choose the CSS selector to use in the generated result.
Used only when Custom is selected.
The variable name used when generating CSS variable code.
Outputs both the :root variable and selector application code.
Live Preview
CSS Gradient
Adjust colors and direction to check the background preview in real time.
Type
linear
Angle
135°
Colors
2
STEP 2
Recommended Presets
Gradient combinations commonly used for buttons, cards, hero backgrounds, and thumbnails.
Basic UI Gradients
Highlight / CTA Gradients
Special Type Gradients
STEP 3
Ready
Generated Result
You can use the code below in a CSS file or style attribute.
Select settings and click Generate CSS Code.
Build a two-color CSS gradient and reuse its code
Preview linear, radial or conic gradients using two color stops. Adjust direction and stop positions, then copy a background-image declaration or save the CSS file.
When to use this tool
- Create a diagonal two-color banner.
- Reuse a gradient with a CSS custom property.
From input to a checked result
- 1
Choose linear, radial or conic.
- 2
Enter the two HEX colors and their stop percentages.
- 3
For linear or conic, choose an angle; radial uses a centered circle.
- 4
Choose a selector and optionally a CSS variable, then generate.
- 5
After generation, valid edits update the code. Correct any error before copying or downloading.
Diagonal blue-to-purple background
- Input
- linear · 135° #2563eb at 0% · #7c3aed at 100%
- Result
- background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
Apply the declaration to an element with visible dimensions.
White center with a dark outer region
- Input
- radial #ffffff at 0% · #000000 at 75%
- Result
- background-image: radial-gradient(circle, #ffffff 0%, #000000 75%);
The second color continues beyond its 75% stop. The radial angle slider does not change this centered-circle output.
How it works
The tool assembles a gradient function from two colors and stop positions. It outputs background-image directly or through a :root custom property. The first stop must not be greater than the second; equal stops create a sharp transition.
Limitations
- Two stops only; no repeating gradients, alpha controls or selectable interpolation space.
- Radial shape and center are fixed; conic uses the default center.
- The selected CSS rule is printed as code, not applied to arbitrary page elements.
- Text contrast across the gradient is not checked automatically.
Your data
Colors, selectors and variable names are processed in the browser. Copied or downloaded CSS contains those settings.
References
Related tools
- Color Contrast Checker
Check text against individual background colors.
- Border Radius Generator
Shape the card containing the gradient.
Frequently asked questions
Why is the angle ignored for radial?
This tool outputs radial-gradient(circle, ...), with a fixed centered circle. Angle affects linear and conic output.
Can I reverse the stop percentages?
The tool asks you to correct a first stop greater than the second. Swap the colors to reverse the transition.
Why can I not export an error?
Only valid generated CSS is exported. Correct the color, selector, variable or stop order, or generate after loading a sample.