CSS Gradient Generator
Build linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);How to use the css gradient generator
Pick linear or radial, set the angle (linear only), and tweak each color stop. The CSS updates live below.
Formula & explanation
linear-gradient(<angle>deg, <color> <pos>%, …) emits a smooth color transition along the given direction.
Examples
Default: an indigo→purple linear gradient at 135°.
Frequently asked questions
- What is a CSS linear gradient?
- A linear gradient transitions smoothly between two or more colors along a straight line defined by an angle (e.g. 135deg goes top-left to bottom-right).
- How do I add more color stops to a gradient?
- Click '+ Add stop' to insert an extra color at any position between 0% and 100%. Each stop can have its own color and position.
- Can I use this gradient on text?
- Yes — apply it with background: <gradient>; then use -webkit-background-clip: text; -webkit-text-fill-color: transparent; on the text element.
- What is the difference between linear-gradient and radial-gradient?
- linear-gradient blends colors along a straight line at a given angle, while radial-gradient radiates outward from a center point in a circular or elliptical shape.
Related design & css tools
- Box Shadow GeneratorCompose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.
- Border Radius GeneratorBuild CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.
- Type Scale GeneratorGenerate a modular type scale from a base font size and ratio (Major Third, Perfect Fourth, Golden Ratio, and more). Outputs CSS custom properties for a consistent typographic system.
- Spacing Scale GeneratorBuild a consistent spacing scale for design systems — enter a base unit and multiplier to generate a full set of spacing tokens in px and rem, ready for Tailwind or CSS variables.
- Image Color PaletteExtract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.
- WCAG Contrast CheckerCheck foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.