CSS Gradient Generator

Create linear and radial CSS gradients visually with live preview.

{{ stop.position }}% 
{{ cssOutput }}

What Is a CSS Gradient?

CSS gradients create smooth color transitions between two or more colors. They are commonly used as backgrounds for buttons, headers, hero sections and decorative elements. Use linear-gradient() to create straight-line transitions at any angle, or radial-gradient() for circular or elliptical transitions.

Linear vs. Radial Gradient

Linear Gradient runs along a straight axis — from top to bottom, left to right, or at any angle. Radial Gradient radiates outward from a center point, either as a circle or ellipse. Both types support any number of color stops with adjustable positions.

Tips for Beautiful Gradients

  • Use a maximum of 2–3 colors for a clean look.
  • Similar hues (e.g. blue → teal) create a harmonious effect.
  • Don't place color stops too close together to avoid hard edges.
  • Test the gradient on different screen sizes.

CSS gradients: linear, radial, conic, repeating

CSS Images Module Level 3 specifies the four functions linear-gradient(), radial-gradient(), conic-gradient(), and their repeating-* variants. Linear gradients follow an axis whose angle starts at 0deg (bottom to top) and rotates clockwise — 90deg goes left to right, 180deg top to bottom, 270deg right to left. Instead of an angle, the function also accepts keywords like to top right, which are more robust against RTL layout.

Radial gradients radiate from a center point. Shape (circle or ellipse) and size (closest-side, farthest-corner, etc.) determine the distribution. Conic gradients rotate around a point — perfect for pie charts, color-wheel icons, and even color rings. Example: conic-gradient(from 0deg, red, yellow, green, blue, red) creates a color wheel without SVG. Repeating gradients tile the pattern at constant intervals, ideal for striped backgrounds and hatching.

Color stops define where a color reaches its peak. Without explicit positions, stops are evenly distributed. linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%) is the CalcSI standard gradient. Two position values per stop create hard edges: linear-gradient(90deg, red 0 50%, blue 50% 100%) is a striped background without transition. CSS Color Module 4 today even allows gradient interpolation in OKLCH: linear-gradient(in oklch, red, blue) avoids the typical muddy grey midtones of classic RGB gradients.

How to build clean gradients

Gradient design is composition: a few deliberate steps lead to professional results, many wild stops to disco optics.

  1. Start with a 2-color linear gradient at 135°. It is the diagonal classic and fits almost any hero area.
  2. Pick stop colors with similar saturation and lightness — a brand teal #0d9488 and a nearby blue #0ea5e9 feel nicer than complementary punch combos.
  3. Add a middle color stop if the direct transition looks grey. Example: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #0ea5e9 100%) with a teal mid-stop avoids the usual RGB muddy phase.
  4. Try different angles — 0°, 45°, 90°, 135°, and 180° cover most designs. Asymmetric angles (e.g. 23°) often look unintentionally crooked; save them for special effects.
  5. Switch to radial for spotlight effects. A bright center to transparent edge (radial-gradient(circle at center, rgba(255,255,255,0.4), transparent 70%)) creates a soft sheen on cards.

Concrete gradient examples

These snippets are ready to use — Stripe, Linear, and Vercel use very similar structures.

  • CalcSI hero: background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%); — teal to sky blue.
  • Stripe-style button: background: linear-gradient(180deg, #635bff 0%, #5b54f0 100%); with box-shadow: 0 4px 12px rgba(99,91,255,0.35);.
  • Subtle mesh: background: radial-gradient(at 0% 0%, #0ea5e933, transparent 50%), radial-gradient(at 100% 100%, #0d948833, transparent 50%); — modern layered look.
  • Conic pie: background: conic-gradient(#0d9488 0 25%, #0ea5e9 25% 60%, #f59e0b 60% 100%); — instant pie chart without SVG.
  • Repeating stripes: background: repeating-linear-gradient(45deg, #f3f4f6 0 10px, #e5e7eb 10px 20px); for subtle diagonal backgrounds.

Limits and performance

Browsers treat gradients as images — so they belong in background-image, not directly in color. Desktop performance is uncritical; each gradient is rendered once into a texture and reused by the compositor. Animated gradients (e.g. background-position shift) are expensive because the browser repaints the bitmap every frame — use transform: translateX() on a static gradient layer instead. Color banding (visible steps instead of smooth transition) appears with extreme lightness jumps over short distances — avoid with mid stops or use linear-gradient(in oklch, ...). When printing, gradients often look like coarse raster; test with a real printer or PDF preview. For brand colors, ensure the middle axis doesn't go grey — two colors with similar hue (teal + sky) are safer than complementary colors (teal + magenta). Finally: even the most beautiful gradient is just background. Text on top of a gradient must hit WCAG AA against the worst spot, not the average.

Frequently asked CSS gradient questions

Which angle is right for linear-gradient?
0deg is bottom to top, 180deg top to bottom, 90deg left to right. Popular diagonal: 135deg. For RTL-friendly designs prefer keywords like to top right.
Why do gradients turn grey in the middle?
Classic sRGB interpolation mixes linearly, which produces grey midtones with complementary colors. Solution: insert an intermediate color stop or use modern linear-gradient(in oklch, ...) in supported browsers.
What is the difference between linear and radial gradient?
linear-gradient follows an axis with a defined angle, radial-gradient radiates from a center point. radial suits spotlights, glows, and mesh effects; linear suits classic backgrounds and buttons.
Can I layer multiple gradients?
Yes, comma-separated in background. Earlier ones sit on top. Example: background: radial-gradient(at top, #fff5, transparent 50%), linear-gradient(135deg, #0d9488, #0ea5e9); for a brand gradient with sheen highlight.
Are CSS gradients better than a JPG background?
Yes, almost always: no network request, perfect scaling on high-DPI, animatable, smaller page size. Only for very complex mesh gradients with many color transitions can an optimized WebP image be smaller.
How do I animate a gradient?
Animating background directly is expensive. Make the gradient larger than the element (background-size: 200% 200%) and animate background-position — the browser only repaints a viewport shift. Alternatively translate a gradient-bearing element via transform.

Related tools