OneKitTools logoOneKitTools
Back to Images

Gradient Generator

Create CSS gradients with 15 presets, export to CSS, Tailwind, SCSS and PNG

About Gradient Generator

Create custom CSS gradients with 15 presets, live preview and export to CSS, Tailwind, SCSS or PNG.

How to use Gradient Generator

  1. 1Choose the gradient type: Linear, Radial or Conic.
  2. 2Add or edit colors — drag the stops to adjust positions.
  3. 3Set the angle (linear) or shape (radial: circle/ellipse).
  4. 4Starter+: choose from 15 professional presets or click "Randomize".
  5. 5Copy the CSS code or export to Tailwind, SCSS or PNG.

Tips

  • Conic mode is perfect for color wheel effects or dial indicators.
  • Download the gradient as PNG to use as a wallpaper, banner or placeholder.
  • The text preview shows how the gradient looks as a background-clip: text effect.

Related tools

OneKitTools TeamUpdated 2.21.4