Aqeeb Studio

Gradients & Mixing

CSS Gradient Generator

Choose linear or radial, set the angle, add up to eight color stops and copy the CSS. A two-color example looks like background: linear-gradient(90deg, #FF0000, #0000FF);

Gradient type

Color stops (2 to 8)

Presets

background: linear-gradient(90deg, #FF0000, #0000FF);

Paste the line into any CSS rule. Add a plain background-color before it as a fallback if you support very old browsers.

Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.

How to use the Gradient Generator

  1. Choose Linear or Radial. For linear gradients, set the angle with the slider or the number field.
  2. Edit the color and position of each stop. Add up to eight stops, or remove one with Remove.
  3. Use Reverse to flip the direction, Randomize for new colors, or a preset as a starting point.
  4. Copy the CSS line and paste it into any rule.

Examples

Two colors

background: linear-gradient(90deg, #FF0000, #0000FF); runs from red on the left to blue on the right.

A preset

The Sunset preset uses three stops: background: linear-gradient(120deg, #FF8A5B, #E5484D, #7B2D8E);

Radial

Switch to radial for a circular glow, for example background: radial-gradient(circle, #FF8A5B, #7B2D8E); Radial gradients do not use the angle.

Tips

  • Gradients between colors with similar lightness look smooth; large lightness jumps can look banded.
  • Choose neighboring hues, or two shades of one hue, for subtle backgrounds.

Questions about the Gradient Generator

How do I add a fallback for old browsers?

Put a plain background-color declaration before the gradient line. Browsers that do not understand the gradient use the plain color.

What does the angle mean?

0° points up, 90° points right, 180° points down and 270° points left. The colors blend along that direction.

Why do some stops show percentages?

When stops are not evenly spaced the tool writes their positions, such as #FF0000 20%, so the CSS reproduces what the preview shows.

Can I use a gradient behind text?

Yes, but check contrast against both the lightest and the darkest part of the gradient, because text must stay readable across the whole area.

Color Mixer

Mix two colors in any proportion and see the in-between steps.

Color Palette Generator

Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.

CSS Color Generator

Generate copy-ready CSS for any color: formats, variables and ready-made snippets.

Contrast Checker

Check text and background contrast against WCAG AA and AAA.