CSS Gradient Generator
Generate CSS linear and radial gradient code from custom directions and color stop lists.
Run tool
This online CSS gradient generator produces ready-to-use background styling rules for modern web layouts. You can configure the gradient style, the orientation angle or direction keywords, and a custom list of color stops. When the gradient style is set to linear, the generator pairs your chosen direction with the list of colors to create a linear gradient rule. If you enter radial or any other style text, the tool constructs a radial gradient centered with a circular shape. Each color value in your comma-separated list is trimmed for clean formatting and assembled into standard CSS syntax. This setup lets you quickly copy gradient snippets for buttons, cards, headers, and full-page backgrounds without writing repetitive markup manually. Use hex codes, RGB, RGBA, HSL, or named colors in the stop list to match your design system. The default values provide an instant starting point that you can customize for any project.
Instructions
- Enter the gradient type, such as linear or radial.
- Specify the direction angle or alignment keywords if you are creating a linear gradient.
- Enter a comma-separated list of color stops, such as hex codes or color names.
- Click Run to generate the formatted CSS gradient code.
Examples
- Linear gradient: Gradient Type set to 'linear', Direction set to 'to right', and Colors set to '#ff7e5f, #feb47b' produces CSS for a horizontal two-color gradient.
- Radial gradient: Gradient Type set to 'radial', Direction left blank or unchanged, and Colors set to '#4facfe, #00f2fe' produces CSS for a circular radial gradient.
FAQ
What happens if I leave the input fields empty?
The generator applies default values: a linear gradient type directed to the right with two warm coral stops (#ff7e5f and #feb47b).
How are color stop values separated?
Enter multiple colors separated by commas. The tool trims extra spaces around each entry and joins them cleanly in the output CSS rule.
Can I use angles like 90deg for the direction?
Yes. When the gradient type is set to linear, any direction text such as '90deg', '45deg', or 'to bottom left' is placed directly into the linear gradient rule.
What gradient shapes are available for non-linear types?
When any gradient type other than linear is specified, the generator formats the snippet as a radial gradient with a circle shape.