CSS Gradient Generator - Create Beautiful Gradients with Live Preview

Live Preview

Gradient Type: Choose the type of gradient to create

Angle (degrees):

Set the direction of the linear gradient (0-360 degrees)

Shape: Choose between circular or elliptical shape

Size: Define how the gradient extends

Position: Center position (e.g., "center", "top left", "50% 25%")

Starting Angle (degrees):

Starting angle for the conic gradient

Position: Center position for the conic gradient

Color Stops

Color Space Interpolation (CSS Level 4): Select color space for ultra-smooth gradient transitions without muddy gray colors

Image to Gradient Palette

Detect dominant colors from any photo or screenshot into gradient color stops

Preset Gradients

Export Options

Export Format:

Generated Code: Generated CSS code for your gradient