Gradient Tools
15 free CSS gradient generators. Build linear, radial, conic, mesh and animated gradients with live preview and instant CSS copy.
CSS Gradient Generator
Build any CSS gradient — linear, radial or conic — with live preview and instant copy.
Open Tool →Gradient Generator
Full gradient editor with unlimited color stops, adjustable angle and live preview.
Open Tool →Linear Gradient
Create linear gradients with adjustable angle and multiple color stops.
Open Tool →Radial Gradient
Create radial gradients for spotlights, glow effects and circular highlights.
Open Tool →Conic Gradient
Create conic gradients for pie charts, color wheels and circular progress.
Open Tool →Mesh Gradient
Create soft mesh gradients with multiple radial blobs — the modern ambient background effect.
Open Tool →Text Gradient
Create CSS gradient text with background-clip. Copy the exact CSS for headings and hero text.
Open Tool →Button Gradient
Create beautiful gradient buttons with live preview and production-ready CSS output.
Open Tool →Background Gradient
Full-page background gradients with live preview at hero size.
Open Tool →Animated Gradient
Create smooth animated gradients with adjustable speed and direction.
Open Tool →Gradient Picker
Click any point on a gradient to sample the exact intermediate color.
Open Tool →Gradient Color Picker
Sample colors from any gradient by clicking — with preset gradients included.
Open Tool →Gradient Preview
Paste any gradient CSS and preview it at multiple sizes instantly.
Open Tool →Gradient CSS Generator
Generate clean, valid CSS for any gradient with multi-stop support.
Open Tool →Gradient Exporter
Export gradients as CSS, SVG, PNG or JSON files.
Open Tool →About Gradient Generators
CSS gradients are one of the most versatile visual tools in modern web design. They replace image files with lightweight, infinitely-scalable, GPU-rendered color transitions. A well-crafted gradient adds depth and polish to hero sections, buttons, cards and section dividers.
OmniColor's gradient tools cover every CSS gradient type — linear, radial, conic — plus advanced options like mesh gradients, animated gradients and text gradients. Every generator produces valid CSS that works in every modern browser.
Gradient Types Explained
- Linear: Colors transition along a straight line at a configurable angle.
- Radial: Colors transition outward from a center point in a circle or ellipse.
- Conic: Colors transition around a center point like a clock face.
- Mesh: Multiple radial gradients stacked to produce a soft, cloud-like multi-color background.
- Animated: The gradient position or size is animated over time for a shifting effect.