Skip to content
Categories
CSS Gradient Generator
Generate linear-gradient or radial-gradient CSS from colors and positions.
Overview
- Builds CSS linear-gradient or radial-gradient by specifying multiple colors and positions (%).
- You can adjust colors, positions, and angle while watching a live preview, so you can create a gradient while checking its actual appearance.
- Click "Add color" to create a gradient with three or more colors, and paste the generated CSS directly into background-image or similar properties.
Usage
- Select "Linear" or "Radial" as the type.
- Enter a color (e.g. HEX) and a position (0-100%) for each stop. Click "Add color" to add more stops.
- Click "Generate CSS" to see a preview and the generated CSS.
Example
Input
linear / 90deg / #FF5733(0%), #3357FF(100%)
Output
linear-gradient(90deg, #FF5733 0%, #3357FF 100%)
Use Cases
- Creating a gradient for a button or background by adjusting colors and angle while watching a live preview
- Converting a gradient specified in a design mockup into CSS linear-gradient syntax
- Building a radial gradient with multiple colors by adjusting each stop's position
FAQ
How many colors can I specify?
There is no upper limit. Click "Add color" to add as many as you need (at least 2 are required).
Is the angle used when Radial is selected?
No. The angle is only used for Linear gradients and is ignored for Radial.
Can I enter a color name or rgb() in the color field?
Yes. HEX values are validated for correctness, but other CSS color notations such as "red" or "rgb(255,0,0)" are passed through as-is.
Notes
- The angle (deg) is only used when Linear is selected and is ignored for Radial.
- The color field accepts not just HEX but other CSS color notations such as "red" or "rgb(255,0,0)" as-is (only HEX values are validated).
- The generated result exists only on the page and is lost on reload, so copy and save it if you need to keep it.
Related Tools
Generate CSS Grid styles from column count, row count, and gap.
Generate multi-size favicon PNGs, a manifest, and HTML tags from an image.
Convert between px, rem, em, and pt.