DESIGN UTILITY

CSS Gradient Generator

Create smooth, modern gradients visually. Choose from linear, radial, or conic, tweak colors and angles, and copy the CSS code instantly. 20 hand‑picked presets included.

90°
0%
50%
100%
Generate full layouts with these colors in the Pro Studio →

help_outline How to Use the Gradient Generator

1
category

Choose Gradient Type

Select Linear, Radial, or Conic. Adjust the angle or shape to get the exact flow you want.

2
colorize

Pick Colors & Positions

Set up to 3 color stops. Drag the sliders to control where each color starts in the gradient.

3
content_copy

Copy the CSS

The CSS code updates live. Click Copy CSS to grab it and paste it directly into your stylesheet.

Smooth Transitions with CSS Gradients

Gradients are more than just eye candy — they create depth, guide the user's eye, and bring life to flat designs. A well‑crafted linear gradient can simulate light sources, while radial gradients add a subtle vignette effect. Conic gradients are perfect for pie charts, progress rings, and modern abstract backgrounds.

Use our tool to experiment with stops: placing colors closer together creates sharp transitions, while spreading them apart yields soft, seamless blends. The result is production‑ready CSS that works in every modern browser.

20Hand‑Picked Presets
3Gradient Types
100%Browser‑Based

Types of CSS Gradients

Gradients are an essential tool in modern web design. They go beyond simple aesthetic appeal, helping to create visual depth, simulate realistic lighting, and subtly guide a user’s attention across an interface.

1. Linear Gradients

The color transition moves smoothly along a straight, directional axis. This axis can go down, up, left, right, or along any diagonal angle you specify.

Key Concepts

  • Direction/Angle: Defined using directional keywords (e.g., to right, to bottom right) or explicit mathematical angles (e.g., 45deg, 180deg).
  • Color Stops: Placed sequentially along the straight line using percentages or absolute lengths (e.g., 0%, 50%, 100%).

Where to Use

  • UI Elements: Button states, clean card backgrounds, and navigation bars to provide subtle modern depth.
  • Hero Sections: Large header banners with dark or colored overlays to make foreground text easily readable.
  • Overlays: Layered over photographic backgrounds to darken or tint an image, improving text contrast.

CSS Examples

/* Smooth horizontal sunset transition */
.linear-horizontal { background: linear-gradient(to right, #ff7e5f 0%, #feb47b 100%);}

/* Sharp, energetic diagonal transition */
.linear-diagonal {background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 50%, #00F260 100%);}
Preview: .linear-horizontal
Preview: .linear-diagonal

2. Radial Gradients

The color transition emerges from a single central focal point and radiates outward in concentric shapes (either circular or elliptical).

Key Concepts

  • Shape: Dictates the contour of the blend—either a uniform circle or a responsive ellipse (which stretches based on the container's proportions).
  • Focal Point Position: Can be repositioned using coordinates or keywords (e.g., at center, at top left, at 30% 40%).

Where to Use

  • Spotlight Visual Effects: Mimicking a realistic lamp shine or physical light source on dark user interfaces.
  • Depth & Vignettes: Darkening the extreme edges of a container to make center elements visually pop.
  • Spherical Simulation: Styling circular UI nodes or buttons to look realistically 3D or glossy.

CSS Examples

/* Centered circular glow effect */
.radial-circle { background: radial-gradient(circle at center, #ff9a9e 0%, #fecfef 70%, #a8e063 100%);}

/* Off-center elliptical spotlight overlay */
.radial-ellipse {background: radial-gradient(ellipse at top left, #1fddff 0%, #1565C0 60%, #020024 100%);}
Preview: .radial-circle
Preview: .radial-ellipse

3. Conic Gradients

The color transition rotates 360 degrees around a fixed central point. Rather than blending outward or along a line, the gradient shifts as if traveling clockwise around a color wheel.

Key Concepts

  • Starting Angle: Determined using the from keyword (e.g., from 45deg). By default, it starts at 0 degrees (pointing straight up).
  • Center Anchor: Repositioned across the container surface using the at keyword (e.g., at 50% 50%).

Where to Use

  • Data Visualization: Building dynamic pie charts, donut charts, and progress ring containers natively in CSS without heavy SVG/JS.
  • Color Pickers: Representing full Hue/Saturation/Lightness (HSL) circular wheels.
  • Abstract Patterns: Creating metallic brushed steel styles, rays, or modern checkerboard designs.

CSS Examples


                    /* Standard color-wheel pattern starting from 0 degrees */
.conic-basic { background: conic-gradient(from 0deg at center, #ff0000, #ffff00, #00ff66, #00ffff, #ff00ff, #ff0000);}

/* Hard-edged segmented layout mimicking a data pie chart */
.conic-chart { background: conic-gradient(#0575E6 0% 33%, #00F260 33% 66%, #F7971E 66% 100%);}
Preview: .conic-basic
Preview: .conic-chart

Frequently Asked Questions

What's the difference between linear, radial, and conic gradients?

Linear gradients transition along a straight line (you choose the angle). Radial gradients radiate from a center point outward, great for spotlights. Conic gradients rotate around a center point, like a color wheel.

Can I add more than 3 color stops?

The tool currently supports up to 3 stops for simplicity, but you can always add more manually in the generated CSS — the syntax is identical.

Are the generated gradients compatible with all browsers?

Yes. The tool outputs standard CSS gradient syntax that works in Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for modern browsers.

What is the meaning of a linear gradient?

A linear gradient is a smooth transition between two or more colors that blend into each other along a straight line, rather than having a harsh, solid split where the colors meet.

How does a linear gradient work?

It works along an imaginary line called a gradient line. You define the angle or direction, and the colors change progressively from the starting point (0%) to the ending point (100%).

How do you apply a linear gradient in CSS?

You apply it using the background property combined with the linear-gradient() function. For example: background: linear-gradient(direction, color1, color2);.

What type of gradient is a linear gradient?

A linear gradient is an axial or straight-line directional gradient, meaning the color shift happens entirely along a single flat 2D axis (up, down, left, right, or diagonal).

What are the main types of gradients?

While digital design tools primarily focus on two main types—Linear (straight line transitions) and Radial (circular or elliptical transitions radiating from a point)—modern CSS also supports Conic gradients (color transitions rotated around a center anchor).

When should you use a linear gradient in Lightroom?

In Adobe Lightroom, you use the Linear Gradient tool (masking filter) when you need to apply edits smoothly across a large, flat surface of a photo without changing the rest of the image—such as darkening an overexposed sky or brightening a dark foreground landscape.

Explore More Tools

photo_size_select_large

Image Resizer Pro

Resize images for YouTube, Instagram, Facebook and more.

 image

WebP Converter

Convert images to modern WebP format.

 data_object

JSON Schema Generator

Create a JSON Schema from sample JSON.

 table_chart

HTML Table Generator

Build custom HTML tables with ease.

 text_fields

Text to HTML

Convert plain text to clean HTML code.
Help us grow—rate your experience!
★
★
★
★
★
Rated 4.8 by designers worldwide
✓ Verified Publisher