CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually with multi-stop support.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
About This Tool
- Select a gradient type: linear, radial, or conic
- For linear gradients, adjust the angle slider to set the direction
- Click the color swatches to change each color stop
- Drag the position sliders to move stops along the gradient
- Click Add Stop to insert additional color stops
- Copy the generated CSS with the Copy button
- Creating gradient backgrounds for web page sections
- Generating button hover effects and UI highlights
- Designing hero section backgrounds without image files
- Building CSS-only decorative elements
- Use radial gradients for spotlight or vignette effects
- Conic gradients are great for pie charts and color wheels
- Add a stop at 0% and 100% to control the full range precisely
- The copied CSS works directly in any style attribute or stylesheet
Related Tools
Color Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK, XYZ, and LAB formats. Bi-directional conversion with live color preview as you type.
Placeholder Image Generator
Generate custom placeholder images for mockups and wireframes in the browser. Set dimensions, background color, text color, and custom label text, then download as PNG or copy the data URI for use in HTML and CSS.
Color Palette Generator
Extract dominant colors from any image or generate harmonious color palettes from a seed color. Supports complementary, analogous, triadic, tetradic, and monochromatic schemes — click any swatch to copy the hex value.
Color Blindness Simulator
Upload an image to see how it appears to people with different types of color vision deficiency, including protanopia, deuteranopia, tritanopia, and achromatopsia.