Tools WebHub logo

CSS Gradient Generator — Create Linear & Radial Gradients Online

Design beautiful CSS gradients with a live preview and generate pure CSS or Tailwind Utility classes.

Via
CSS
background: linear-gradient(to right, #005EC7, #22C55E);
Tailwind classes
bg-gradient-to-r from-[#005EC7] to-[#22C55E] rounded-[24px]
Privacy note: All processing happens entirely in your browser. No data is sent to our servers.

About this tool

The CSS Gradient Generator creates CSS gradient code visually. Pick your colors, set the direction or angle, choose between linear, radial, and conic gradient types, and copy the ready-to-use CSS. No manual gradient syntax needed — see the result live as you adjust.

The output works in all modern browsers and can be used directly in vanilla CSS, Tailwind CSS custom styles, styled-components, and any CSS-in-JS library.

How to use

  1. Select gradient type: linear (direction-based), radial (circular from center), or conic (sweeping around a point).
  2. Choose your start and end colors using the color picker.
  3. Adjust the angle (for linear) or position (for radial).
  4. Add additional color stops if needed for multi-color gradients.
  5. Copy the generated CSS and paste into your stylesheet.

This page is available at /tools/gradient-generator/.

Understanding the result

  • Linear gradients: background: linear-gradient(135deg, #color1, #color2) — the angle (0deg = bottom to top, 90deg = left to right, 135deg = diagonal).
  • Radial gradients: background: radial-gradient(circle, #color1, #color2) — spreads outward from a center point.
  • Conic gradients: background: conic-gradient(#color1, #color2) — sweeps around a center point like a color wheel.
  • Color stops control where each color starts and ends. Adding a stop at 30% means the first color fills 30% of the gradient before transitioning.
  • The generated code uses standard CSS and works without any prefix in all modern browsers (Chrome, Firefox, Safari, Edge).

Related tools

Base64 Encoder & Decoder
Securely encode plain text into Base64 format, or decode Base64 strings back to their original readable state.
Border Radius Generator
Configure border radius attributes intuitively and generate the accompanying CSS or Tailwind classes.
Box Shadow Generator
Visually construct box shadows and automatically generate standard CSS or arbitrary Tailwind shadow classes.
Code Diff Viewer
Perform side-by-side textual comparisons to easily spot differences between two versions of code or text.
Color Picker & Converter
Select custom colors visually and convert seamlessly between HEX, RGB, and HSL color formats.
Cron Expression Explainer
Translate complex 5-field cron scheduling expressions into clear, plain English sentences.

FAQ

How do I add a gradient to text in CSS?

Use background-clip: text with -webkit-text-fill-color: transparent. Apply the gradient as a background, then clip it to the text shape: background: linear-gradient(90deg, #ff0000, #0000ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

What is the difference between linear and radial gradients?

Linear gradients transition along a straight line at a specified angle. Radial gradients expand outward from a center point in a circular or elliptical shape. Conic gradients rotate around a center point, similar to a pie chart.

Can I use gradients in Tailwind CSS?

Tailwind has built-in gradient utilities: from-{color}, via-{color}, to-{color} with bg-gradient-to-{direction}. For custom gradients beyond Tailwind's palette, add them in tailwind.config.js under theme.extend.backgroundImage.

How do I make a transparent gradient?

Use rgba or hsla colors with alpha transparency, or use the 'transparent' keyword. Example: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent) creates a gradient from 80% black to fully transparent.