Gradient Generator

A CSS gradient generator is a web tool that helps you create smooth color transitions for web design. It allows you to visually design linear and radial gradients with multiple color stops, providing instant CSS code that can be copied and used in your stylesheets. This tool eliminates the need to manually write complex gradient syntax.

To create a linear gradient: 1) Select "Linear" as the gradient type, 2) Choose a direction using the preset buttons (Top, Right, Bottom, Left, etc.) or use the custom angle slider, 3) Add color stops by clicking the "Add Stop" button, 4) Click on each color stop to change its color using the color picker, 5) Adjust positions using the sliders, and 6) Copy the generated CSS code.

Linear gradients blend colors in a straight line along a specific direction (horizontal, vertical, or diagonal). Radial gradients blend colors from a center point outward in a circular or elliptical pattern. Linear gradients are great for backgrounds and directional effects, while radial gradients work well for spotlights, vignettes, and radial patterns.

You can add unlimited color stops to your gradient using the "Add Stop" button. Each color stop can be positioned anywhere from 0% to 100% along the gradient. More color stops create more complex and nuanced color transitions. You must have at least 2 color stops, and you can remove stops (except when only 2 remain).

Yes! Click the "Copy CSS" button to instantly copy the complete CSS gradient code to your clipboard. The code includes the background property with the full gradient syntax, ready to paste into your CSS file or style attribute. A confirmation message appears when the code is successfully copied.

The "Random Gradient" button generates a completely random gradient for inspiration. It randomly selects 2-4 color stops with random colors and positions, chooses a random gradient type (linear or radial), and sets a random direction. This feature is perfect for discovering new color combinations and design ideas.

For radial gradients, you can choose between "circle" (perfect circle) and "ellipse" (oval shape) using the shape selector. The position dropdown lets you select where the gradient center appears: center, top, bottom, left, right, top left, top right, bottom left, or bottom right. These options give you complete control over the radial gradient's appearance.

Yes, use the "Export JSON" button to download your gradient configuration as a JSON file. The export includes the gradient type, direction/position settings, all color stops with their colors and positions, and the generated CSS code. This allows you to save and reuse your gradients across different projects.