Gradient Maker

Tool Description: Gradient Maker (GM)

What it is:
A two-column, print-friendly gradient editor restyled to the “Color Calculator” system. It maintains your original functionality while enforcing the specified typography, spacing, palette, elevations, and button treatments.

What it does:

• Add, drag, select, or delete gradient stops; edit colour and position.

• Switch between Linear (with preset rotations) and Radial gradients.

• Inline HSV colour picker with HEX input and live preview.

• One-click Copy CSS outputs a ready-to-paste background: declaration.

• Random seed and Clear reset utilities.

• Print view hides interactive controls and emphasizes the preview and CSS.

How it helps a developer (examples):

• Rapidly prototype brand backgrounds and export CSS for landing pages.

• Create consistent UI elevations and tokens for design systems.

• Generate presentable, printable gradient swatches for stakeholder review.

Usage Instructions:

1. Click on the gradient bar to add a stop, or drag existing stops to reposition.

2. Select a stop to edit its HEX in the text field or open the colour picker via the swatch box.

3. Use Position dropdown for exact percentages.

4. Choose Rotation (for Linear) or switch Type to Radial from the dropdowns.

5. Click Copy CSS to copy the final background: style.

6. Use Random for inspiration; Clear resets to a default two-stop gradient.