ToolMochi
中文

CSS Gradient Generator

Visually build linear or radial CSS gradients, adjust colors, angle and position, then copy the CSS.

Type
CSS code
background: linear-gradient(135deg, #5048e5 0%, #22d3ee 100%);
This tool runs entirely in your browser. Your input is never uploaded.

How to use

  1. 1Choose a linear or radial gradient
  2. 2Adjust both colors — set an angle for linear or a center position for radial
  3. 3Copy the generated CSS when it looks right

FAQ

How do I use the generated code?

Copy the background declaration into a CSS rule or inline style. The preview shows the final result.

Can I add more color stops?

The generator uses two colors to stay simple. Add extra stops manually in the generated CSS if you need them.

Does it support transparency?

The picker and HEX input are opaque. After copying, you can replace a color with rgba() or transparent.

Related tools

Color Converter

Convert colors between HEX, RGB, HSL and HSV with a live color picker preview.

Color Palette Generator

Generate tints, shades, complementary, analogous and triadic palettes from one base color.

Contrast Checker

Check the contrast ratio between text and background colors and see WCAG AA / AAA results for normal and large text.

CSS Box Shadow Generator

Tune offset, blur, spread, color and opacity, then copy ready-to-use box-shadow CSS.