FixThatAppAll Tools
Design

Gradient Generator

Create CSS linear gradient code with live preview values.

How This Tool Works

The Gradient Generator creates CSS gradient code — linear, radial, or conic — for use in web design. Gradients replace solid background colors with smooth transitions between two or more colors. The output is ready-to-paste CSS: for example background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). Common uses: hero section backgrounds, button hover effects, card overlays on images, text gradients (with background-clip), and decorative UI elements.

How to Use

  1. Enter the first color in field A (HEX or CSS color name, e.g. #667eea or purple).
  2. Enter the second color in field B.
  3. Click Run. The CSS gradient code is generated, ready to paste.
  4. Copy the output into your CSS file as the value of the background or background-image property.

Common Questions

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

Linear gradient transitions along a straight line (e.g. left to right, top to bottom, or diagonal). Radial gradient radiates from a center point outward in a circle or ellipse. Conic gradient sweeps around a center point like a color wheel — useful for pie chart effects.

Can I have more than two colors in a gradient?

Yes. Add additional color stops: linear-gradient(135deg, red 0%, yellow 50%, green 100%). Each stop specifies a color and a position (percentage or pixel value along the gradient line).

How do I apply a gradient to text?

Use: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent. This clips the gradient to the shape of the text. Browser support is excellent in modern browsers.

Read the full guide →