Free Gradient Background Generator – CSS & PNG Export Tool
Premium Gradient Generator
Live Preview
CSS Code Output
Animation CSS:
Preset Manager
Gradient Generator Help
Gradient Type: Choose between linear, radial, or conic gradients. Repeating options tile the gradient across the element.
Linear Controls: Set the angle for linear gradients (e.g., 0deg is bottom to top, 90deg is left to right).
Radial Controls: Define the shape (circle/ellipse), size (keywords like 'farthest-corner' or specific lengths/percentages like '50px' or '20% 40%'), and center position (keywords like 'center', 'left', or values like '25% 75%').
Conic Controls: Set the starting angle ('from angle') and the center position for conic gradients.
Color Stops:
Click 'Add Color Stop' to add more colors. Each stop has:- A color picker (click to choose color).
- A text input for color (accepts hex, rgb(), rgba(), hsl(), hsla(), named colors).
- A position slider and number input (0-100% or pixels, depending on 'Color Stop Unit' setting).
- An 'X' button to remove the stop (minimum 2 stops).
Advanced Settings:
- Reverse Gradient: Flips the order of color stops.
- Color Stop Unit: Choose between percentage (%) or pixels (px) for color stop positions.
- Vendor Prefixes: Adds browser-specific prefixes (like -webkit-) to the CSS output for older browser compatibility.
Actions:
- Random Gradient: Generates a random gradient.
- Reset Gradient: Restores all settings to their initial defaults.
- Undo/Redo: Revert or reapply recent changes.
Live Preview: Shows the gradient in real-time.
- Apply To: See the gradient on the background or as clipped text.
- Animate: Adds a subtle movement to the preview.
- Overlay Image: Load an image to see how the gradient interacts with it (use blend modes).
- Texture: Apply a subtle noise texture.
CSS Output: Displays the generated CSS. Use 'Copy Full CSS' for the complete style rule or 'Copy Gradient Value' for just the `background-image` value. Export as a .css file or as PNG/JPG/SVG images.
Animation CSS: If 'Generate Animated Gradient CSS' is checked, it provides keyframes and a class to create a CSS-animated gradient.
Preset Manager: Save your favorite gradients to your browser's local storage. Name your preset and click 'Save'. Load, delete, import (from JSON), or export all presets (to JSON).
Tooltips: Hover over most controls for a brief description of their function.
(Help sections for extra features in v1.1)
Color Stops (Bug Fixed): Drag color stops to reorder them. Use the text field for precise color values including transparency (e.g., rgba(255,0,0,0.5), hsla(120,100%,50%,0.5)). Minimum 2 stops.
Live Preview - Text Mode: When "Text (clip)" is selected, you can customize the preview text, font family, and font size using the controls that appear below the preview.
Export Options - Resolution & Size: Choose a preset resolution for PNG/JPG exports or specify custom dimensions. Estimated file sizes for PNG, JPG, and SVG are displayed and update based on your settings.
Texture Overlays: Includes various noise patterns, including a "Detailed Noise" option for finer grain.
