Skip to main content
CompressNConvert

CSS Gradient Generator

Create CSS gradients with draggable color stops, transparency, and sRGB, Oklab, or OKLCH blending. Preview linear, radial, conic, and repeating gradients.

Runs locally in your browser

Gradient

Type

Angle135°

Blend in

Stop color — #7E22CE

Saturation 84 percent, brightness 81 percent, hue 272 degrees.

Presets

Preview

Color stops

Drag a handle to move it. Click the ramp to add a stop.

Generated code

background: linear-gradient(135deg, #7E22CE 0%, #00C7A3 100%);

Complete tool guide

CSS Gradient Generator guide

Build a CSS gradient with multiple color stops and a live preview. Choose linear, radial, or conic geometry, adjust transparency and interpolation, and copy CSS, a Tailwind arbitrary-value class, or the gradient settings as JSON.

Your input is processed in the current browser tab and is not sent to the application server.

Why use this tool?

  • Position color stops visually and fine-tune their percentages.
  • Compare gradient geometry and color interpolation in one preview.
  • Create scalable backgrounds without exporting a bitmap image.

Common use cases

  • Hero, card, and section backgrounds
  • Overlay scrims that keep text legible over photography
  • Progress rings and pie-style charts built from a conic gradient
  • Repeating gradients used as stripes and other simple patterns

How to use it

  1. 1

    Choose linear, radial, or conic.

  2. 2

    Drag the handles on the ramp to move color stops, and click the ramp to add one.

  3. 3

    Set the angle with the dial, or drag the center marker on the preview.

  4. 4

    Copy the generated CSS, Tailwind class, or JSON token.

Controls and results explained

Type and direction

Linear gradients follow an angle; radial gradients spread from a center; conic gradients rotate around a center. The center controls apply to radial and conic gradients.

Stops and opacity

A stop contains a color and position. Two different colors at the same position create a hard transition. Alpha lets a background image or lower layer show through.

Interpolation and repetition

The sRGB option omits an explicit interpolation clause; Oklab and OKLCH add one. Repeating mode repeats the interval between the first and last stops.

Worked examples

Create a left-to-right gradient

Start with: Two opaque stops: #000000 at 0% and #FFFFFF at 100%

  1. Choose Linear, turn repeating off, and set the angle to 90deg.
  2. Choose sRGB and copy the CSS output.
background: linear-gradient(90deg, #000000 0%, #FFFFFF 100%);

The gradient runs from black on the left to white on the right. A single text color may not contrast sufficiently across its full width.

Create a hard color split

Start with: Two opaque stops: #0000FF and #FFFF00

  1. Choose Linear, sRGB, 90deg, with repeating off.
  2. Set both stop positions to 50%, keeping blue first.
background: linear-gradient(90deg, #0000FF 50%, #FFFF00 50%);

Equal positions create a hard boundary with no transition interval. Change the shared percentage to move the split.

CSS angles

For a linear gradient, 0deg points up, 90deg points right, and 180deg points down. The preview size also affects the apparent direction of diagonal color boundaries.

Choosing a blend

Compare sRGB, Oklab, and OKLCH with your actual stop colors. Their paths through color space can produce different midpoints; no option guarantees a brighter or more legible result.

Text over a gradient

Check contrast across the entire area occupied by the text, including intermediate colors and underlying content visible through transparency. Checking only the endpoints can miss a weak region.

Practical tips for better results

  • Use equal stop positions for a hard edge; nearby positions create a short blend.
  • Keep the first-to-last stop interval short when you want a visible repeating pattern.
  • Retain a simple background fallback when using gradient syntax outside your target browser support.

Frequently asked questions

How do I make a transparent gradient?

Select a stop and lower its alpha. Transparency reveals the backdrop, so preview the exported gradient over the actual image or surface.

Why does my gradient look banded?

Subtle ramps can expose limited color precision in the display or rendering pipeline. Test the final size and device; a carefully chosen texture can mask visible bands.

Can I use the generated gradient in Tailwind?

Copy the Tailwind output as a literal class in a source file that Tailwind scans. Dynamically assembled class names may need explicit source configuration.

What to check before using the result

  • Gradient support and interpolation syntax depend on the target browser. Test the exported CSS where it will run.
  • JSON stores this tool’s settings; it is not a universal gradient-token standard.

Keep working

Related color & design

Continue with another focused tool from the same collection.

CSS Box Shadow GeneratorStack multiple shadow layers and drag the light direction on a live preview.CSS Text Shadow GeneratorLayer text shadows for glow, outline, letterpress, and long-shadow effects.CSS Border Radius GeneratorDrag handles to shape corners, from rounded boxes to organic blob shapes.Glassmorphism GeneratorDesign frosted-glass panels with blur, tint, border, and shadow controls.