CSS Gradient Generator — Linear, Radial & Conic

CSS Gradient Types Explained: Linear vs Radial vs Conic

CSS gives you three gradient types, each with different geometry and use cases. Understanding when to use each one helps you create the right visual effect for your design.

Linear gradients transition colors along a straight line. You specify an angle (or direction keyword) and a series of color stops with percentage positions. linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) creates a diagonal purple-to-violet gradient. Linear gradients are the most commonly used type — good for backgrounds, buttons, headers, and any surface where a directional flow looks natural.

Radial gradients emanate outward from a center point, creating circular or elliptical color transitions. radial-gradient(circle, #6366f1 0%, #1e1b4b 100%) creates a glowing indigo effect. Radial gradients are excellent for spotlight effects, hero backgrounds with a focal point, hover effects, and any design where you want to draw the eye to the center.

Conic gradients rotate colors around a center point — think of a pie chart or color wheel. They were added to CSS relatively recently (Chrome 69+, Firefox 83+, Safari 12.1+). Conic gradients are used for pie charts, color wheels, checkerboard-like patterns, and the spectrum effect in color pickers. They take a from angle parameter to set the starting rotation.

All three gradient types are CSS backgrounds — you can combine them by stacking multiple backgrounds with commas:background: radial-gradient(...), linear-gradient(...);

How to Add Gradients in CSS, Tailwind, and React

The gradient you build in this tool can be used in three different ways depending on your tech stack:

Plain CSS. Copy the CSS output and paste it into your stylesheet:

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

Tailwind CSS. For linear gradients with up to three stops, Tailwind has built-in utilities using bg-gradient-to-{direction} combined with from-{color}, via-{color}, and to-{color}. For example:

<div class="bg-gradient-to-br from-indigo-500 to-violet-500">...</div>

For more complex gradients (more than 3 stops, radial, conic), use arbitrary values in Tailwind v3+:

<div class="bg-[conic-gradient(from_0deg,#ef4444,#eab308,#22c55e,#3b82f6,#ef4444)]">...</div>

React inline styles. For dynamic gradients generated from JavaScript values, use inline styles:

function GradientBox({ colors }) {
  const bg = `linear-gradient(135deg, ${colors.join(', ')})`;
  return <div style={{ background: bg }} />;
}

Our Color Picker shows Tailwind class names for individual colors, making it easy to build your gradient using Tailwind-compatible color values.

Gradient Design Trends 2026

Gradients have evolved from the flat gaudy backgrounds of early CSS into a sophisticated design tool. Here are the styles dominating 2026:

Mesh gradients. Multiple radial gradients overlaid with blend modes to create organic, cloudy color fields. Unlike simple point-to-point gradients, mesh gradients have no visible direction — they feel ambient and tactile. Achieved in CSS with multiple background: radial-gradient(...) stacked with comma-separated declarations.

Grain/noise gradients. A smooth gradient with an SVG noise filter applied on top, creating a tactile, printed feel. This technique reduces the banding that can occur with subtle gradients and adds visual depth. Applied with an SVG filter referenced in CSS.

Dark mode gradients. Deep, rich gradients using very dark colors (near-black indigo, midnight blue, dark forest green) with subtle lighter stops. These feel premium without being harsh on the eyes. The presets "Midnight" and "Deep Sea" in this tool are examples.

High saturation conic gradients. Used for color pickers, data visualizations, and decorative elements. The "Conic Spectrum" preset shows the full color wheel rendered as a CSS conic gradient.

For branding, the most timeless approach is still a two-stop linear gradient in your brand's primary and secondary colors. Use our presets as starting points and adjust to match your palette — and use the Palette Extractor to pull brand colors from a logo image.

Using SVG Gradients

SVG has its own gradient syntax, separate from CSS. SVG gradients are defined in the<defs> section of the SVG and referenced by ID. They are essential when applying gradients inside SVG shapes like paths, circles, and text.

A linear gradient in SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#6366f1" />
      <stop offset="100%" stop-color="#8b5cf6" />
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#grad)" />
</svg>

Note that SVG does not natively support conic gradients — for those, use CSS gradients. SVG gradient coordinates use a different system: x1, y1, x2, y2 express the start and end points as fractions of the bounding box (0–1) when gradientUnits="objectBoundingBox", or as absolute coordinates when gradientUnits="userSpaceOnUse".

Use the SVG output from this tool to apply gradients to icon fills in Figma, Illustrator, or SVG code. For SVG file optimization, see our SVG Optimizer.

Frequently Asked Questions