Free browser-based developer tool

Advanced CSS & Tailwind Gradient Generator

Create linear, radial, conic, and repeating gradients without hand-writing complex CSS. Start in Basic mode, or use Advanced mode to control every color stop, angle, center, radius, interpolation space, transition hint, and CSS value. Preview the result instantly, then copy production-ready CSS or Tailwind code. Free and no sign-up required.

  • Free to use
  • No sign-up
  • CSS + Tailwind
  • Linear, radial and conic

Create

Gradient type
135°

Colors

Preview

Color positions

Drag to adjust spacing
Editing color stop 1.

Copy the CSS

style.css
background-image: linear-gradient(135deg, #5266d9 0%, #c9b3ee 50%, #f58a66 100%);

How to use the gradient generator

Create custom gradients in three simple steps:

  1. Choose Linear, Radial, or Conic mode and decide whether you need the quick Basic editor or the more precise Advanced editor.
  2. Add your colors, arrange the color stops, and adjust the angle, position, center, radius, opacity, or interpolation settings.
  3. Preview the result and copy the generated CSS or Tailwind code into your project.

Every change should appear in the preview immediately, making it easier to experiment with complex gradients without repeatedly editing CSS by hand.

Create every major type of CSS gradient

CSS gradients are generated images created by the browser. They scale cleanly across screen sizes and can be used for backgrounds, buttons, cards, text effects, charts, decorative elements, and application interfaces.

This generator supports linear, radial, conic, and repeating gradients in one editor.

Linear gradient generator

A linear gradient blends colors along a straight line. Choose a preset direction or define an exact angle to control how the colors move across the element.

Use linear gradients for:

  • Website and application backgrounds
  • Hero sections
  • Buttons and cards
  • Gradient text
  • Overlays and decorative sections

Advanced mode supports exact angles using degrees, turns, radians, gradians, CSS variables, and CSS expressions.

Example output:

background-image: linear-gradient(
  135deg,
  #5266d9 0%,
  #c9b3ee 50%,
  #f58a66 100%
);

Radial gradient generator

A radial gradient starts from a center point and spreads outward in a circular or elliptical shape.

Use the radial gradient controls to customize:

  • Circle or ellipse shape
  • Gradient center
  • Closest-side and farthest-side sizing
  • Closest-corner and farthest-corner sizing
  • Explicit horizontal and vertical radii
  • Custom CSS position and size values

Radial gradients work well for spotlights, glows, soft backgrounds, depth effects, focus areas, and layered interface designs.

Conic gradient generator

A conic gradient rotates colors around a center point instead of moving them along a straight line or outward from the center.

Control the starting angle, center position, individual color-stop angles, and interpolation behavior.

Conic gradients are useful for:

  • Color wheels
  • Pie and donut charts
  • Loading indicators
  • Badges
  • Circular progress effects
  • Decorative backgrounds

Example output:

background-image: conic-gradient(
  from 0deg at center,
  #5266d9 0%,
  #c9b3ee 50%,
  #f58a66 100%
);

Repeating gradient generator

Enable repeating mode to repeat the selected linear, radial, or conic gradient pattern.

Repeating gradients can create:

  • Stripes
  • Rings
  • Checker-inspired patterns
  • Sunburst effects
  • Repeated chart segments
  • Decorative CSS backgrounds

The generated result uses the appropriate repeating-linear-gradient(), repeating-radial-gradient(), or repeating-conic-gradient() CSS function.

Control every color stop precisely

Add, remove, reorder, and position multiple colors to create anything from a simple two-color fade to a detailed multi-color gradient.

Basic mode provides quick percentage-based controls. Advanced mode provides exact control over:

  • Automatic color-stop placement
  • Single-position color stops
  • Two-position color stops and solid color ranges
  • Transition hints between adjacent colors
  • Color-stop opacity
  • Percentage, length, angle, viewport, container, and CSS expression units
  • Negative positions and values beyond 100% where supported by CSS

Two-position color stops can create solid bands inside a gradient. Matching adjacent stop positions can produce hard edges rather than smooth transitions.

Use modern CSS color interpolation

Advanced mode allows the gradient to be interpolated in different color spaces.

Available options include:

  • sRGB
  • Linear sRGB
  • Display P3
  • Lab
  • OKLab
  • LCH
  • OKLCH
  • Rec. 2020
  • ProPhoto RGB
  • Custom color profiles

The selected interpolation space can significantly change how colors blend. OKLab and OKLCH can produce more perceptually consistent transitions, while Display P3 can represent a wider color range on supported displays.

When a polar color space is selected, use the available hue-route controls to customize how the gradient moves around the color wheel.

Generate CSS and Tailwind gradient code

The generator produces copy-ready CSS using the background-image property.

For Tailwind projects, it generates an arbitrary-value class that can represent complex linear, radial, conic, repeating, and multi-stop gradients that may not fit the basic from, via, and to utilities.

Example Tailwind JSX output:

className={
  "bg-[image:linear-gradient(135deg,_#5266d9_0%,_#c9b3ee_50%,_#f58a66_100%)]"
}

The generated class can be copied directly into React or Next.js JSX. Always preserve the complete generated arbitrary value because spaces and special characters must be escaped correctly for Tailwind.

Preview gradients in four shapes

Preview the same gradient as a:

  • Rectangle
  • Square
  • Circle
  • Star

Preview shapes help test how a gradient behaves across different visual surfaces. Changing the preview shape does not modify the exported CSS or Tailwind gradient code.

Why use the RazSoft gradient generator?

The RazSoft gradient generator combines a quick visual workflow with advanced CSS controls.

Use Basic mode when you need to create a gradient quickly. Switch to Advanced mode when you need exact control over geometry, color interpolation, stop positions, transition hints, CSS variables, or modern color spaces.

The tool is useful for frontend developers, Tailwind developers, UI designers, students, and anyone who wants to experiment with CSS gradients while still receiving production-ready code.

Frequently asked questions

What is a CSS gradient?

A CSS gradient is a browser-generated image that creates a transition between two or more colors. Gradients can be used anywhere CSS accepts an image, including backgrounds. The primary gradient functions are linear-gradient(), radial-gradient(), and conic-gradient().

What is the difference between linear, radial, and conic gradients?

A linear gradient moves colors along a straight line. A radial gradient spreads colors outward from a center point. A conic gradient rotates colors around a center point, similar to the colors around a wheel.

Can I create a Tailwind gradient with custom colors?

Yes. Design the gradient visually and select the Tailwind output option. The generator produces a Tailwind arbitrary-value class containing the complete CSS gradient, including custom colors, positions, angles, and geometry.

Can I add more than three colors?

Yes. Use the Add Color control to create a multi-color gradient. Each color can have its own position and opacity, and the stops can be reordered.

Can I control the exact position of every color stop?

Yes. Basic mode provides percentage-based positions, while Advanced mode supports percentages, lengths, angles, viewport units, container units, CSS variables, and custom expressions where the selected gradient type permits them.

What are two-position color stops?

A two-position color stop assigns a beginning and ending position to the same color. This creates a solid color section inside the gradient before it begins transitioning to the next color.

What is a gradient transition hint?

A transition hint changes where the visual midpoint between two colors appears. It provides more control over the progression between adjacent color stops without adding another color.

Does the generator support repeating gradients?

Yes. Advanced mode can produce repeating linear, radial, and conic gradients for patterns such as stripes, rings, and sunburst effects.

What is OKLCH gradient interpolation?

OKLCH is a perceptual color space designed to make changes in lightness, chroma, and hue behave more consistently with human vision. Depending on the colors, an OKLCH gradient may look smoother or more balanced than the same gradient interpolated in sRGB.

Do the rectangle, square, circle, and star options change the generated code?

No. These shapes are preview surfaces only. They help users see how a gradient behaves on different shapes, but the exported gradient code remains the same.

Is the gradient generator free?

Yes. The RazSoft CSS and Tailwind gradient generator is free to use and does not require an account.