Skip to content
SPCXTools

CSS Gradient Generator

Design a gradient background visually and copy the CSS — linear, radial or conic.

Runs locally — files never leave your device

Loading tool…

How to use CSS Gradient Generator

  1. 1Choose a gradient type — Linear, Radial or Conic — or start from a preset.
  2. 2Pick colors for the stops and drag the sliders to set where each color sits.
  3. 3Set the angle (or the shape for radial gradients) and add up to eight stops.
  4. 4Copy the CSS and paste it into your stylesheet.

Create CSS gradients visually

Gradients add depth and color to buttons, hero sections, cards and backgrounds without a single image file. Writing them by hand, though, means guessing angles and percentages and reloading the page again and again. This CSS gradient generator lets you design the gradient visually with a live preview and gives you clean, copy-ready CSS that works in every modern browser.

Features

  • Three gradient types: linear, radial (circle or ellipse) and conic.
  • Up to eight color stops with draggable positions.
  • Angle slider for linear and conic gradients.
  • Presets and a random button for quick inspiration.
  • Solid fallback color included in the CSS.
  • Copy the code in one click.

Using the CSS

Paste the code into the rule for the element you want to style:

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

Gradients are images in CSS, so you can also use them in background-image, layer several gradients separated by commas, or combine them with a photo: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); darkens a picture so white text on top stays readable.

Design tips

  • Keep it subtle. Two neighboring hues (blue to purple, orange to pink) look smoother and more modern than opposite colors.
  • Check contrast. If text sits on the gradient, make sure it's readable over both ends — test colors with the Color Converter, which shows contrast ratios.
  • Pull colors from a brand image with the Image Color Picker.
  • Add depth to cards and buttons with the Box Shadow Generator.

Frequently asked questions

Why are there two background lines in the CSS?
The first line sets a solid fallback color for the rare browsers or email clients that don't support gradients. Browsers that support gradients use the second line, which overrides the first.
What do the angles mean for a linear gradient?
0° runs from bottom to top, 90° from left to right, 180° from top to bottom and 270° from right to left. Angles in between run diagonally — 135° goes from the top-left to the bottom-right.
What's the difference between linear, radial and conic gradients?
A linear gradient changes color along a straight line. A radial gradient spreads outward from the center in a circle or ellipse. A conic gradient rotates around the center like a color wheel or pie chart.
Do I need vendor prefixes like -webkit-?
No. Linear and radial gradients work unprefixed in every current browser, and conic gradients are supported in all modern browsers released since 2020.
How do I make a hard edge instead of a smooth blend?
Put two stops at the same position with different colors. For example, red at 50% and blue at 50% creates a sharp split in the middle.

Related tools

Box Shadow GeneratorFine-tune soft, sharp, layered or inset shadows with a live preview and copy the CSS.Color ConverterConvert any color between HEX, RGB, HSL, HSV and CMYK, and check its contrast.Image Color PickerClick anywhere on an image to get its exact HEX, RGB and HSL color — plus its main color palette.Color Blindness SimulatorPreview your images through the eyes of someone with color vision deficiency to ensure your designs are accessible.Color Contrast CheckerCheck whether your text is readable enough — and get the closest color that passes WCAG.Color Palette GeneratorPick one color and get a harmonious five-color palette based on color theory.