Color Tools / Live Editor

Gradient Generator

Build a CSS gradient in the browser with live preview, safe input validation, and copyable code. The second color field is the end color, so both inputs actively shape the final gradient.

Live preview Copyable CSS Validated colors

Linear gradient 90deg #020024 to #00d4ff

background: linear-gradient(90deg, #020024 0%, #00d4ff 100%);

Controls

Pick two colors, adjust the angle, and switch between linear and radial gradients.

Angle 90deg

The angle controls the direction of the linear gradient.

Color Stops

The primary input is the start color, and the secondary input is the end color.

Start color

Accepts 3-digit or 6-digit hex colors.

End color

This secondary input now controls the second color stop.

Actions

Load a sample, swap colors, randomize the pair, or clear the editor.

Presets

Quick combinations inspired by popular gradient editors.

Output

The CSS output is validated before it is copied or shown as ready.

Ready to generate a gradient.

Image Tools / Gradient Map

Gradient Map

Map an imageâ€™s luminance through two colors, using the same live gradient editing workflow below.

Upload image Two-color map PNG download

Image source

Upload an image, drop one in, or load the demo image to try the effect quickly.

Upload Drop an image here or browse files Accepted formats depend on the browser. PNG, JPG, GIF, and WEBP work well.

Map colors

The start and end colors define the low and high luminance ends of the map.

Shadow color

Highlight color

Mapped output

The processed canvas can be downloaded as a PNG once a source image is available.

Source file No file selected

Output file No processed image yet

Output preview

Processed output will appear here.

Download PNG

Load an image to begin the transformation.

Ready to apply a gradient map.