Gradient generator

Welcome to your new go-to tool for creating beautiful, custom CSS gradients. This guide will walk you through each feature from a user's perspective, helping you master the interface and unlock its full potential. The workspace is divided into two main columns for an efficient workflow:

• The Left Panel: This is your visual area. It contains a large, live preview of your gradient and, below it, the final CSS output box. What you see is what you get.
• The Right Panel: This is your control center. Here you’ll find all the sliders and buttons needed to craft your design, from colors and gradient types to advanced noise effects.

This structure allows you to make adjustments on the right and see the results instantly on the left.

The foundation of any great gradient is its colors. The primary controls for this are located at the top of the right-hand panel.

1. The Color Stop Slider

This interactive slider is a visual representation of your gradient. Each circle (or "thumb") on the slider is a color stop. You can:

• Click and Drag a Stop: To change its position in the gradient.
• Click a Stop to Select It: An active stop is highlighted, allowing you to edit its specific color in the "Active Color" editor below.

2. The Active Color Editor

Once you select a color stop, this panel becomes active. Here you can:

• Use the color swatch on the left to visually pick a new color.
• Enter a specific hex code directly into the text field.
• Click "Remove" to delete the selected color stop (you must have at least two).

3. Action Buttons

Below the color editor, you have two powerful buttons: + Add Color to add a new stop to your gradient, and Randomize to generate a completely new, aesthetic gradient automatically.

This tool goes beyond basic gradients by offering three distinct types. Selecting a type will reveal contextual controls specific to it.

• Linear: Creates a gradient that progresses in a straight line. An "Angle" slider will appear, allowing you to control the direction of the gradient.
• Radial: Creates a gradient that radiates from a central point. Controls for "Shape" (Circle or Ellipse) and "Center Position" (X and Y) will appear.
• Conic: Use this powerful conic gradient generator to create a gradient that sweeps around a center point, like a radar screen. An "Angle" slider appears to control the starting point of the sweep.

To add a sophisticated, tactile texture to your design, use the "Noise Overlay" controls. A high-quality CSS gradient with noise can make a design feel more premium and organic. First, select an overlay type:

• Grain: This adds a realistic, photographic grain effect.
• Lines: This creates a pattern of fine, repeating lines.

Once a type is selected, you can use the sliders to control its appearance:

• Intensity: Controls how visible the noise effect is.
• Scale & Detail (for Grain): Adjust the coarseness and complexity of the grain texture.
• Angle & Spacing (for Lines): Control the direction and density of the lines.

If you need inspiration or a quick starting point, the built-in Inspiration Gallery makes this the perfect aesthetic background generator. Simply expand the "Inspiration Gallery" section at the top of the controls.

You can browse presets by themes like "Sunset," "Neon," or "Metallic." Clicking on any preset will instantly load its full configuration into the tool, allowing you to use it immediately or customize it further.

Once your gradient is perfect, the tool makes it easy to use and share your work.

Copying the CSS

The CSS output in the bottom-left panel updates in real-time. Simply click the "Copy CSS" button to copy the complete, cross-browser compatible code to your clipboard, ready to be pasted into your project.

Sharing Your Design

This is a uniquely shareable CSS tool. Click the "Share" button to generate a special URL that contains all of your gradient's settings. Anyone who opens the link will see your exact design loaded into the tool. This is perfect for collaborating with team members or sharing your creations.