Create beautiful gradient backgrounds for your projects.
background: ;
Our free CSS gradient generator lets you create beautiful color gradients for your websites, apps, and design projects. Build linear, radial, and conic gradients with up to 10 color stops, preview them in real-time, and instantly copy the CSS code or download as PNG, JPEG, or WebP images.
Whether you're designing hero backgrounds, button styles, or card overlays, this tool generates production-ready CSS gradients that work in all modern browsers including Chrome, Firefox, Safari, and Edge.
Transitions colors along a straight line. You can control the angle — horizontal, vertical, or any diagonal. The most commonly used gradient type for backgrounds, buttons, and overlays.
linear-gradient(to right, #f00, #00f)Colors radiate outward from a center point in a circular or elliptical pattern. Great for spotlight effects, glowing elements, and circular UI components.
radial-gradient(circle, #4facfe, #00f2fe)Colors sweep around a center point like a color wheel. Ideal for pie charts, circular progress indicators, and decorative color wheel effects.
conic-gradient(from 0deg, #f00, #0f0, #00f)Image Blur
Add blur effect to your images
Brightness
Adjust image brightness
Contrast
Adjust image contrast
Crop Image
Crop images to desired size
Resize Image
Resize images to any dimension with precise control over width, height, and aspect ratio for web, social media, and print
Bulk Resize Image
Resize multiple images at once with consistent dimensions for batch processing, web optimization, and social media preparation