🌈

CSS Gradient Generator

Create beautiful CSS linear and radial gradients with a visual editor.

Preview

Gradient type

Linear

Radial

Direction

Color stops

Color

Position (%)

Color

Position (%)

Generated CSS

.gradient {
  background: linear-gradient(to right, #6366f1 0%, #a855f7 100%);
}

Tailwind arbitrary value (v3+): bg-[linear-gradient(to_right,_#6366f1_0%,_#a855f7_100%)]

About This Tool

Design CSS gradients visually with a live preview. Choose between linear and radial gradients, set the direction, add up to 5 color stops with custom positions, and copy the generated CSS code with one click. Also shows a Tailwind CSS compatible class. Perfect for web designers and front-end developers.

Related Tools

🎨Converters

Color Converter

Convert colors between HEX, RGB, and HSL formats instantly.

{ }Developer Tools

JSON Formatter & Validator

Format, validate, and beautify JSON data with syntax highlighting.