Gradient Generator

CSS gradients are one of the most powerful yet underused visual tools in modern web design. A gradient can replace an image for backgrounds, overlays, buttons, and decorative elements — saving bandwidth, improving performance, and being infinitely resolution-independent. But writing gradient CSS by hand is tedious: you need to remember the syntax (background vs background-image, the angle convention, the comma-separated colour stops), mentally visualise what a set of stops will look like, and then refresh the browser to check. This tool replaces that trial-and-error loop with a live interactive builder. Three gradient types are supported, matching the three CSS gradient functions: - **Linear gradient:** Colours transition along a straight line at a specified angle. Angles are measured in degrees clockwise from the top (the CSS convention: 0deg = bottom-to-top, 90deg = left-to-right, 180deg = top-to-bottom, 270deg = right-to-left). This is the most commonly used gradient type — for hero sections, button backgrounds, and subtle shading. - **Radial gradient:** Colours radiate outward from a central point in an elliptical or circular shape. The tool uses the `circle` keyword for simplicity. Radial gradients are perfect for spotlight effects, vignettes, and circular badges. - **Conic gradient:** Colours rotate around a central point like the slices of a pie chart or a colour wheel. Conic gradients are newer (supported in all modern browsers since 2020-2021) and are ideal for progress rings, loading indicators, and pie-chart-style visualisations. **Colour stops** define the transition. Each stop has a colour (set via a native `<input type="color">` picker) and a position (a percentage from 0% to 100% that specifies where on the gradient line that colour should appear). The tool enforces a minimum of 2 stops (with 2 stops, you have a simple two-colour gradient) and a maximum of 5 stops (additional stops let you create complex, multi-colour gradients with precise control over colour placement). Stops are automatically sorted by position before rendering and before generating the CSS string. The preview area is a `<div>` element whose background-image is set to the generated CSS gradient string — this means what you see in the preview is exactly what CSS will render in a browser, pixel-for-pixel. There is no approximation, no canvas drawing, no image generation — the browser's own CSS gradient engine renders the preview, so it is 100% accurate. Below the preview, the generated CSS code is displayed in a monospace code block with a Copy button, so you can grab the exact `background:` or `background-image:` declaration and paste it into your stylesheet. **Angle control for linear gradients:** A number input lets you type any angle from 0 to 360 degrees. A slider provides a quick drag-to-adjust experience. The preview updates live on every input event — you see the gradient rotating in real time.