Create CSS gradients visually with linear, radial, and conic modes. Add, edit, and remove color stops. Adjust angle and position. Choose from 20 presets. Copy CSS code instantly.
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Pick colors visually and convert between HEX, RGB, HSL, CMYK.
Convert colors between HEX, RGB, HSL, CMYK, and HSB.
Generate harmonious color palettes with multiple modes.
Resize images with custom dimensions, percentage, or social media presets.
Generate favicons from text or emoji instantly.
Three types: Linear gradients transition along a straight line at any angle (0-360 degrees). Radial gradients radiate from a center point. Conic gradients sweep around a center point.
Click anywhere on the gradient bar to add a new color stop at that position. Each stop can be edited with a color picker and position slider. Remove stops by clicking the X button (minimum 2 stops required).
Yes, there are 20 popular gradient presets at the bottom of the tool. Click any preset to load its color stops. You can then customize the colors, positions, and type to your liking.
Click "Copy CSS" to copy the background property declaration. Paste it into your CSS stylesheet or inline styles. The output works in all modern browsers.