🎨

Gerador de Gradientes

Crie facilmente belos gradientes CSS lineares e radiais com uma prévia ao vivo e saída de código instantânea.

css design color generator

Gradient Settings

deg

Color Stops

Preview & Output

Live Gradient Preview

CSS Output

About Gradient Generator

The Gradient Generator helps you create beautiful CSS gradients for your web projects. Easily design linear and radial gradients with custom colors and positions, then instantly copy the generated CSS code.

Features:

  • Create linear and radial gradients
  • Customize angle for linear gradients
  • Choose shape and position for radial gradients
  • Add multiple color stops with precise positioning
  • Live preview of your gradient
  • Instant CSS output, ready to copy and use

How to use:

  1. Choose your desired gradient type: Linear or Radial.
  2. Adjust the settings (angle for linear, shape/position for radial).
  3. Add and remove color stops, selecting colors and their positions.
  4. See the live preview update as you make changes.
  5. Copy the generated CSS code from the output field.