CSS Gradient Generator

WHAT IT DOES

CSS Gradient Generator creates beautiful CSS gradients with a visual preview that updates in real time. Build linear or radial gradients with multiple color stops, adjust the angle (0-360 degrees), and position each color stop precisely. A live preview shows your gradient as you build it, and the generated CSS code is displayed below. Choose from six preset gradients (Sunset, Ocean, Aurora, Vintage, Mint, and Radial Sun) to get started quickly. Copy the CSS code to your clipboard or use it directly in your stylesheet.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All gradient generation, color processing, and preview rendering occur on your machine without any network requests. No gradient data, generated code, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox. CSS gradient generation uses standard CSS syntax.

HOW TO USE

Click the extension toolbar icon to open the CSS Gradient Generator panel. Select "Linear Gradient" or "Radial Gradient" from the type dropdown. Adjust the angle using the angle input (0-360 degrees) for linear gradients. Add color stops by clicking "Add Color Stop"—each stop includes a color picker and a position input (e.g., "25%", "50%", "75%"). Click "Add Custom" to add a stop with your chosen color and position. Click the "✕" button on any stop to remove it (minimum 2 stops required). The preview area shows your gradient in real time, and the output area displays the generated CSS code. Click "Copy" to copy the CSS code to your clipboard. Click a preset button (Sunset, Ocean, Aurora, Vintage, Mint, or Radial Sun) to load a pre-configured gradient. Toggle "Include fallback color" to add a solid color fallback before the gradient. Select the output format (CSS, SCSS, or Less) to match your workflow.

THE GRADIENT GENERATION ENGINE — WHY IT WORKS

Most gradient generators use simple string concatenation that can produce invalid syntax. This tool uses a structured approach: it collects color stop values from each stop input, validates them, and formats them according to CSS gradient syntax. For linear gradients, the engine formats the angle as "angle deg" and joins the color stops with commas. For radial gradients, it uses the "circle" shape and joins the stops. Each color stop is formatted as "color position" with position as a percentage. The fallback color is the first color in the gradient, ensuring browsers that don't support gradients still show a color. The preview uses the background CSS property to display the gradient immediately. The output formatter supports CSS, SCSS, and Less variable syntax. This approach ensures valid, cross-browser compatible gradient code every time.

THE PANEL

The CSS Gradient Generator panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the input controls, preview, and output area adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to generate gradients in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. The tool generates gradient code but does not modify your website automatically—you must copy and paste the code into your stylesheet. The radial gradient uses the "circle" shape; other shapes are not currently supported. The position input accepts percentages (e.g., "25%") or keywords; invalid positions are ignored. All gradient data is processed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.