Switching between linear and radial, and specifying direction
The CSS gradient generator is a tool to visually assemble CSS linear-gradient() and radial-gradient(). The initial state is linear, at a 135-degree angle, with two color stops: #f857a6 at 0% and #ff5858 at 100%.
Switching between "Linear" and "Radial" using the buttons retains the colors and positions of the current stops.
When selecting linear, you can change the angle from 0 to 360 degrees in 1-degree increments. In CSS angles, 0 degrees is bottom to top, 90 degrees is left to right, 180 degrees is top to bottom, and 270 degrees is right to left; positive values move clockwise.
0 and 360 degrees point in the same direction, but you can select either exact value on the screen. The output always includes the selected number and deg instead of directional keywords.
When selecting radial, you choose the circle's center position instead of an angle. There are 9 options: center, top center, bottom center, left center, right center, top left, top right, bottom left, and bottom right.
For example, "Top Left" becomes circle at top left. at top does not mean drawing only the upper half of the circle; it sets the gradient's center at the top middle of the element.
The radial shape is fixed to circle. Size keywords like ellipse, closest-side, or farthest-corner, and arbitrary center coordinates using px or % are not configured.
conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), and overlapping multiple gradients are also out of scope.
2 to 8 color stops and input validation
Each color stop has a color, a position from 0 to 100%, and an ID to distinguish selection on the screen. You must have at least 2 stops and can add up to 8.
The position slider moves in 1% increments and only affects the selected stop. While general CSS allows positions below 0% or above 100%, this tool restricts the operational range to 0-100%.
Overlapping positions are allowed.
You can customize colors using the browser's native color picker or the hex text field. The color input requires an exact 6-digit HEX format, such as #3b82f6 or #111111.
If an incomplete or invalid draft string is entered, the tool retains the last valid color for the preview and generated CSS, preventing malformed syntax while preserving your typing draft in the input field.
Once a complete 6-digit hex code is provided, the selected stop immediately updates across the preview element and output code.
You can place multiple colors at the exact same position. Colors at the same position can be used to create hard boundaries rather than smooth transitions.
The tool sorts stops from smallest to largest position to build the CSS string, rather than outputting them in the order added. For multiple items at the same position, their current sequence in the array is maintained.
When clicking "Add stop", a new color stop is inserted at the midpoint of the largest adjacent position gap, or at the nearest available integer percentage if that midpoint is already occupied.
All stops are automatically sorted along the gradient axis by position. The generator supports a minimum of 2 and a maximum of 8 color stops.
You can delete the currently selected stop as long as at least 3 stops exist, ensuring the gradient always maintains the required minimum of 2 stops.
Six presets and post-load editing
The Gradient Gallery features six fixed presets. There are five linear presets: "Sunset Glow" at 45 degrees changing from #f857a6 to #ff5858, "Deep Neon" at 135 degrees from #00c6ff to #0072ff, "Aurora" at 90 degrees from #a8ff78 to #78ffd6, "Lavender Magic" at 45 degrees from #7f00ff to #e100ff, and "Coral Breeze" at 135 degrees from #ff9966 to #ff5e62.
There is one radial preset: "Midnight Blue". It loads three stops: #0f2027 0%, #203a43 50%, and #2c5364 100%. Preset names are labels for distinction and do not represent an evaluation of color scheme quality, suitability for use, or brand harmony.
Loading this preset maintains your currently selected circle center position.
Selecting a preset replaces the current gradient type, linear angle, and all color stops rather than appending to your active configuration.
Preset configurations also explicitly assign and reset the radial center position (such as circle at center) alongside their predefined color stops.
Loading a preset completely refreshes the CSS preview and editor controls to match the chosen pattern. Because loading a preset replaces the active settings, be sure to copy any customized CSS or Tailwind code you wish to keep before applying a new preset.
When a preset is loaded, new IDs are generated for every color stop, and the editor automatically selects the first stop while synchronizing the color draft input field and preview state.
This ensures that the inspector, slider controls, and active color picker immediately reflect the newly loaded configuration. You can then fine-tune individual stop positions, adjust hex values, add additional stops up to the maximum of 8, or remove unwanted stops whenever there are 3 or more stops present, ensuring at least 2 stops always remain.
Custom presets cannot be exported to local files or saved to browser storage.
CSS string assembly and preview
Before output, stops are sorted in ascending position order and concatenated with commas in the "color position%" format. It builds strings like linear-gradient(135deg, #f857a6 0%, #ff5858 100%) for linear, or radial-gradient(circle at center, #0f2027 0%, #203a43 50%, #2c5364 100%) for radial.
The tool does not use a parser to read arbitrary CSS back in; it unidirectionally generates strings from on-screen values.
The real-time preview passes the exact assembled string to the background of the confirmation area and lets the current browser render it.
It does not display via Canvas, SVG, image files, or a custom rendering engine. While changing on-screen values updates the string and preview, this feature does not guarantee rendering speed or frame rate.
The tool only calculates the stop sequence and CSS string. It does not use JavaScript to generate intermediate colors between stops, convert to OKLCH, Lab, or Display P3, or add in ... to indicate interpolation methods.
Actual intermediate colors depend on the #RRGGBB values and the browser receiving the CSS. We cannot guarantee specific color space interpolation, maintained saturation, or identical colors across all browsers.
If the preview area and the destination element have different widths, heights, or aspect ratios, the appearance will change, especially for radial or diagonal linear gradients.
Use the preview to check the code's structure and rough color transitions, and separately verify the exact shape and result when applied to actual headers, cards, buttons, etc., using standard CSS.
Standard CSS and Tailwind outputs
There are two output formats available in the English interface: standard "CSS" and "Tailwind CSS". The CSS output provides a complete stylesheet declaration, such as background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%); or its radial equivalent.
The Tailwind output generates an arbitrary property utility class, such as [background:linear-gradient(82deg,_#111111_10%,_#222222_25%,_#333333_60%,_#444444_90%)], preserving exact degree angles, sorted color positions, and radial centers directly without using approximate cardinal classes or inline React styles.
The CSS declaration is ready to paste directly into stylesheets, CSS modules, or <style> blocks. The Tailwind CSS output generates arbitrary value utility classes using bracket notation, encoding linear gradients like [background:linear-gradient(82deg,_#111111_10%,_#222222_25%,_#333333_60%,_#444444_90%)] and radial gradients like [background:radial-gradient(circle_at_center,_#3b82f6_0%,_#1e40af_100%)].
Spaces are replaced with underscores to maintain valid Tailwind class syntax without dropping intermediate stops or percentage positions.
This ensures multi-stop gradients with 2 to 8 stops render accurately without relying on approximate utility approximations or React style snippets.
Note that the standard output uses the background shorthand property. Applying this to existing elements will affect previously set background-related values like background-image, background-color, background-size, and background-repeat.
To preserve other background settings, check the destination declarations' priorities and adjust by rewriting to background-image if necessary.
Clicking the copy button for each format writes the displayed code directly to your clipboard via the Clipboard API. The interface awaits confirmation from the API, displaying a checkmark icon and visual success state for approximately 2 seconds when successful.
If clipboard access is blocked by browser permissions or environmental restrictions, an inline notice prompts you to select and copy the text manually.
Modifying any gradient settings immediately clears active copy indicators and resets the button state. The generator does not produce SCSS/Sass mixins, vendor prefixes, legacy browser fallbacks, or downloadable files.
Display differences, contrast, and unsupported ranges
The spread of gradient colors changes based on the applied area's dimensions and aspect ratio. Because the browser and display device can also affect the appearance, the preview will not match pixel-by-pixel across all environments.
The code uses standard linear-gradient() and radial-gradient(), so please check the display on the target browsers, WebViews, and actual screen sizes.
When placing text over a background, the contrast varies by location. Even if you test only the two endpoint colors as solids, the tool cannot automatically guarantee the contrast for intermediate colors or areas where text overlaps.
It does not accept text color, font size, or text position, nor does it evaluate WCAG compliance. Verify the actual area behind the text across normal, hover, and focus states.
Ellipses, radial sizes, arbitrary center coordinates, conic/repeating gradients, multiple layers, color space/interpolation specification, gradient animations, and hover state combinations are unsupported.
The tool relies on a 6-digit hex color picker without an independent opacity input, so while you can manually enter valid CSS rgba or alpha hex values, automatic alpha conversion or Tailwind alpha support is not guaranteed.
You cannot drag stops on a track or directly input numbers; select the target via the radio button and change it with the position slider.
There is no history, auto-save, shared URLs, or image/CSS file export.
The presets and generated code do not evaluate visual appeal, brand guideline conformity, readability, or browser compatibility. Before using the generated results publicly, check the destination's background settings, display area, contrast with text, and supported browsers.
The tool also does not blanketly judge the rights to materials, designs, or project terms of use.