Create Beautiful CSS Gradients with Real-Time Preview
A powerful tool for creating beautiful CSS gradients with support for multiple color stops, linear and radial gradients, animations, and multiple export formats including CSS and Tailwind CSS.
The Gradient Generator allows you to create beautiful CSS gradients with multiple color stops, adjustable angles, blur effects, and animations. Whether you need a subtle gradient background or a vibrant animated effect, this tool makes it easy to visualize and export your gradient styles.
Tip: Use the "Random" button to generate unique gradient combinations instantly. Great for inspiration!
The Gradient Generator supports three gradient types and two background modes, giving you complete flexibility to create any gradient effect you can imagine.
Colors transition along a straight line. Choose from preset directions (top, right, bottom, left) or set a custom angle (0-360°).
Colors emanate from a central point outward in circular or elliptical patterns. Perfect for spotlights and circular elements.
Colors radiate from a center point in a cone pattern. Great for creating pie charts, color wheels, and conical effects.
Creates pure CSS gradients using multiple color stops. This is the default mode and produces scalable, resolution-independent gradients.
Upload your own image or SVG and apply gradient effects. Useful for overlaying gradients on photos or using custom graphics.
Create complex, multi-layered gradients by adding multiple gradient layers. Each layer can have its own colors, type, and blend mode, enabling rich visual effects impossible with single gradients.
Tip: Use multiple layers to create mesh gradients, overlapping color spots, and rich atmospheric effects. Combine with blend modes for creative results.
Apply CSS blend modes to control how gradient layers interact with each other. This creates sophisticated compositing effects.
normalDefault - no blending
multiplyDarkens - multiplies colors
screenLightens - inverts, multiplies, inverts
overlayContrast - darkens or lightens
darkenKeeps darkest color
lightenKeeps lightest color
color-dodgeBrightens - divides
color-burnDarkens - inverts, divides, inverts
hard-lightHard or soft light overlay
soft-lightGentle light or dark overlay
differenceSubtracts colors
exclusionLike difference, lower contrast
hueApplies hue of top color
saturationApplies saturation of top color
colorApplies hue and saturation
luminosityApplies luminosity
Enable repeating gradients to create striped patterns that tile seamlessly. Useful for backgrounds, borders, and decorative elements.
repeating-linear-gradient() - Repeating linear patternsrepeating-radial-gradient() - Repeating radial patternsColor stops define the colors in your gradient and their positions. Each color stop can be customized independently, allowing you to create complex, multi-color gradients.
The simplest gradient type with a start and end color. Perfect for simple backgrounds and subtle transitions.
Use 3-4 colors to create complex, vibrant gradients with smooth transitions through multiple hues.
Note: At least one color stop is always required. The tool will not allow you to delete the last remaining color.
The angle control determines the direction of the gradient flow. For linear gradients, you can set any angle from 0° to 360°. Radial gradients always emanate from the center.
Colors transition along a straight line at the specified angle. Most common type for backgrounds and UI elements.
Colors transition outward from a central point in a circular or elliptical pattern. Great for spotlights and circular elements.
The blur effect softens the gradient edges, creating a smooth, diffused appearance. This is useful for creating subtle backgrounds, overlays, and atmospheric effects.
Tip: Combine blur with animation for smooth, flowing gradient effects that look great on hero sections and feature backgrounds.
Bring your gradients to life with smooth, continuous animations. Perfect for creating engaging backgrounds that draw attention without being distracting.
Choose from different animation styles to create unique visual effects.
Position oscillation - the gradient slides back and forth horizontally. Great for subtle movement and flowing effects.
Hue rotation - colors cycle through the hue spectrum over time. Creates a vibrant, ever-changing rainbow effect.
Control: Hue Shift (0-360°)
Opacity animation - the gradient smoothly fades in and out. Perfect for breathing effects and attention grabbers.
Controls: Min/Max Opacity (0-100%)
Position oscillation with wave pattern - creates a smooth, flowing wave-like motion across the gradient.
Controls: Amplitude, Frequency
For advanced control, you can create custom keyframes to animate specific properties at different points in time.
Tip: Use keyframes to create complex animations like color pulsing combined with angle rotation, or create custom transitions that match your brand identity.
Note: Animation only works in Gradient mode, not Image mode. Complex animations with many keyframes may affect performance on older devices.
In Image/SVG mode, you can upload your own images to apply background effects. The tool supports drag-and-drop for quick file uploads.
Tip: Upload SVG files for resolution-independent graphics that scale perfectly at any size. Great for logos and icons.
The Gradient Generator provides multiple export formats to suit different use cases. You can copy CSS directly, download as SVG or PNG, or export Tailwind CSS classes.
Copies the generated CSS background property to your clipboard. Ready to paste in your stylesheet.
Copies Tailwind CSS utility classes. Supports angle-based directional classes and custom color values.
Downloads the gradient as a scalable SVG file. Perfect for design tools and vector graphics software.
Downloads a PNG image of the gradient preview at 1920x1080 resolution. Great for social media and presentations.
The generated output is optimized for modern web development. Below are the details for each output format.
background-image: linear-gradient(90deg, #ff6b6b 0%, #fbc02d 50%, #4ecdc4 100%);bg-gradient-to-r from-[#ff6b6b] via-[#fbc02d] to-[#4ecdc4]to-t = 0°to-r = 90°to-b = 180°to-l = 270°[{angle}deg]Create harmonious color palettes automatically using color theory. Select a base color and choose a harmonization scheme to generate matching colors that work well together.
Colors opposite on the color wheel. Creates high contrast and vibrant combinations. Best used with one dominant color.
Three colors equally spaced on the color wheel. Offers high contrast while retaining color harmony.
Colors adjacent on the color wheel. Creates a serene, comfortable design with subtle transitions.
Different shades and tints of a single color. Creates a clean, cohesive look with visual depth.
Add texture overlays to your gradients for added depth and visual interest. Perfect for creating grainy, noise, or patterned backgrounds.
Adds random noise texture to create a subtle, organic feel. Great for vintage or natural aesthetics.
Similar to noise but with larger particles. Creates a film grain or sandy texture effect.
Applies a repeating pattern overlay. Useful for creating textured backgrounds with visual interest.
Tip: Use subtle texture intensity (10-30%) for professional results. Heavy textures can overpower your design.
Get started quickly with built-in presets or save your own custom gradients for future use.
Choose from professionally designed gradients organized by category:
Save your own gradients to access them later:
Tip: Save gradients you use frequently - your custom presets persist across sessions!
Experiment freely with full undo and redo support. Make changes with confidence knowing you can always go back.
UndoCtrl+Z - Revert last change
RedoCtrl+Y - Restore undone change
Need inspiration? Click the "Random" button to generate a unique gradient with random colors, angles, and settings. Great for breaking out of creative blocks!
Create eye-catching hero section backgrounds with animated or static gradients to make a strong first impression.
Design gradient buttons and call-to-action elements that stand out and encourage user interaction.
Add subtle gradient backgrounds to cards, containers, and content blocks for visual depth.
Apply gradients to text elements for headlines and decorative typography effects.
Create smooth animated gradient loaders and loading states for your applications.
Export gradient PNGs for social media posts, banners, and promotional graphics.