Gradient Maker

Design linear, radial, and conic CSS gradients

135°
0%
100%
CSS
background: linear-gradient(135deg, #713EFD 0%, #FB3100 100%);
Full CSS Block
.element {
  background: linear-gradient(135deg, #713EFD 0%, #FB3100 100%);
  background-attachment: fixed;
}

Frequently Asked Questions

What types of CSS gradients can I create?
Linear, radial, and conic gradients. Each type supports multiple color stops, custom positions, and specific directional controls.
Can I copy the CSS code directly?
Yes. The generated CSS code updates in real time and can be copied with one click. It includes browser-compatible syntax.
How many color stops can I add?
There's no practical limit. Add as many color stops as you need, drag to reposition, and adjust opacity for each stop independently.
Can I adjust the gradient angle?
Yes. For linear gradients, set any angle from 0° to 360°. For radial gradients, choose the center position and shape. For conic gradients, set the starting angle.
Does this generate modern CSS?
Yes. The output uses standard CSS gradient syntax supported by all modern browsers. No vendor prefixes needed.

Related Tools

Palette GeneratorColor

Generate color palettes with harmony rules and export as CSS/JSON.

Color ConverterColor

Convert colors between HEX, RGB, HSL, HSV, and CMYK.

p5.js EditorGenerate

Live p5.js editor with Monaco, templates, and instant preview.

Shader EditorGenerate

GLSL fragment shader editor with live WebGL preview.