ColorKitOpen the workshop
Generate

The gradient studio

Build linear, radial, or conic gradients with multiple stops and copy production-ready CSS. The live preview updates as you drag the angle and shift each stop, so you can compose a hero background or button fill without guessing how the colors will blend.

How to use it

  1. Select linear, radial, or conic gradient type.
  2. Adjust the angle where it applies.
  3. Edit color stops and stop positions.
  4. Copy the generated CSS background declaration.

Gradient types

Linear gradients fade along an angle, perfect for page-wide backgrounds. Radial gradients fade out from a center point, useful for spotlights or rounded cards. Conic gradients sweep colors around a center, great for pie charts, color wheels, and decorative borders. Each one writes a complete background declaration on copy.

Frequently asked questions

Which gradient types are supported?+

The generator supports linear, radial, and conic CSS gradients.

Can I add more than two color stops?+

Yes. Add stops, choose each color, and set each stop position from 0 to 100 percent.

Does the copied output include valid CSS?+

Yes. The copy button writes a complete background declaration using the current gradient.

Can I share a gradient setup?+

Yes. Type, angle, colors, and stop positions are encoded into the page URL.

Will my gradient stay after reload?+

Yes. The latest gradient state is saved in local browser storage and restored on reload.

Color palette generator

Create harmonious 5-color palettes with copyable HEX, RGB, and HSL values.

Color picker

Pick a color visually and copy developer-ready values.

Hex to RGB converter

Convert HEX into RGB, convert RGB back to HEX, and process bulk color lists.