All Gradient Generator — Linear, Radial, Conic, Mesh, Image & Text
The EnigmaEasel All Gradient Generator is a free, browser-based tool for creating every type of gradient — linear, radial, conic, mesh, gradient steps, image-extracted palettes, and text gradients. Get production-ready CSS, Tailwind CSS, and SVG code in seconds, or download your gradient as a high-resolution PNG, JPG, SVG, or PDF. No account, no software, no cost — just open and create.
Buy Us a Coffee
Linear, Radial & Conic Gradient Generator
Generate any standard CSS gradient with precise control over angle, direction, shape, and color stops. Fine-tune individual colors using HSL sliders, apply easing curves (ease-in, ease-out, ease-in-out) for non-linear transitions, and lock specific color stops to preserve them during randomization. Radial gradients support both circle and ellipse shapes, with control over center position and radius. Every setting outputs a live CSS gradient declaration you can copy and drop directly into your stylesheet—no cleanup required.
Full angle and direction control for linear gradients
Circle and ellipse shape support for radial gradients
Easing curve transitions (ease-in, ease-out, ease-in-out)
Color stop locking to protect key colors during randomization
Instant CSS code output with one-click copy
Mesh Gradient Generator
Create fluid, organic mesh gradients using up to 8 independently draggable color points. Each point radiates a soft color field that blends naturally with neighboring points to produce the complex, multi-dimensional gradients that define modern UI design—used widely in app backgrounds, hero sections, and marketing materials. Adjust blur intensity and grain texture to dial in the exact aesthetic you need. The real-time interactive editor shows changes instantly, and completed gradients export as PNG or JPG in preset social media dimensions.
Up to 8 draggable color points with adjustable positions
Blur and grain controls for unique textures
Real-time preview with an interactive editor
Social media presets: Instagram (1080×1080), Twitter/X (1200×675), and custom dimensions
Gradient Steps & Color Palette Generator
Generate 2 to 40 discrete color steps between any two or more anchor colors, using your choice of RGB, HSL, LCH, or OKLCH perceptual interpolation. OKLCH produces the most visually uniform transitions because it operates in a perceptually linear color space—colors appear to shift at a consistent rate even across hue boundaries. Apply easing curves for non-linear step distribution, lock individual steps to anchor them, and export the complete palette as CSS custom properties, SCSS variables, or a JavaScript array.
2–40 discrete color steps with full easing control
Perceptual interpolation modes: RGB, HSL, LCH, and OKLCH
Professional Export: CSS variables, SCSS, or JavaScript arrays
Design Handoffs: Download swatches as PNG, JPG, SVG, or PDF
Extract Gradient from Image
Upload any PNG, JPG, or WEBP image and the tool automatically extracts 3 to 8 dominant colors using k-means color quantization—the same algorithm used in professional design software. The extracted colors are ordered for smooth gradient flow and immediately rendered as a usable gradient. Re-run extraction with randomized pixel sampling to discover alternative palettes hidden in the same image. This mode is ideal for brand-matching gradients to photography or existing visual assets.
Format Support: Works with PNG, JPG, and WEBP uploads
Advanced Extraction: 3–8 dominant colors via k-means quantization
Randomized re-extraction for palette variety
Multi-format Output: HEX, RGB, HSL, RGBA, HSLA, CMYK formats
Text Gradient Generator
Apply gradient fills directly to custom text with complete typographic control. Set font family, size, weight, style, letter spacing, line height, and stroke independently. Choose from 8 built-in gradient presets or define a fully custom gradient. The rendered result can be exported as CSS and HTML for direct web implementation, as Tailwind utility classes for component-based workflows, or as SVG for scalable vector use.
Full typography controls: Font, size, weight, style, spacing, and stroke
8 built-in gradient presets plus a custom gradient builder
Code Export: CSS, HTML, Tailwind, or SVG code
High-resolution downloads: PNG and JPG for social media and print
Export Formats & Code Output
Every gradient type supports multiple export paths to fit different workflows. Developers get clean, copy-ready code; designers get high-resolution image files; and social media creators get properly sized exports for every major platform.
| Export Type | Format | Details |
| CSS Code | CSS | Complete gradient declarations, vendor-prefixed |
| Tailwind CSS | Utility class | Linear: utility class · Radial/Conic: inline style |
| SVG Code | SVG | linearGradient and radialGradient with correct coordinates |
| Transparent Image | PNG | Alpha channel preserved for overlays |
| Photographic Image | JPG | Compressed, white background |
| Vector Export | SVG | Fully scalable, editable in Illustrator/Figma |
| Print-Ready | High-resolution, CMYK-compatible |
Preset Export Sizes
Don’t guess the pixels. Use our built-in presets to export gradients perfectly sized for the most common web and social media placements.
| Preset Name | Dimensions |
| Default / Web | 1280 × 720 px |
| Instagram Square | 1080 × 1080 px |
| Twitter / X Header | 1200 × 675 px |
| Web Banner | 1920 × 400 px |
| Thumbnail | 600 × 200 px |
| Custom | Any user-defined size |
Color Formats Supported
All gradient modes support viewing, copying, and exporting colors in seven standard formats to match any design or development workflow, from legacy web projects to modern, wide-gamut displays.
| Format | Example | Best Use |
| HEX | #6C3EFF | Web CSS, most common format |
| RGB | rgb(108, 62, 255) | CSS, JavaScript development |
| RGBA | rgba(108, 62, 255, 0.8) | CSS with transparency (alpha) |
| HSL | hsl(258, 100%, 62%) | Human-readable, easy to tweak CSS |
| HSLA | hsla(258, 100%, 62%, 0.8) | HSL with transparency |
| CMYK | C:58 M:76 Y:0 K:0 | Professional print workflows |
| LCH | lch(40 90 280) | Perceptual, wide-gamut color spaces |
Available Color Themes in this Color Palette Builder
Balanced: Well-distributed colors with moderate saturation and brightness.
Light/Pastel: Soft, muted colors with high lightness values.
Bright/Neon: Vivid, saturated colors that pop.
Dark: Deep, rich colors with low lightness.
Aesthetic: Trendy, Instagram-worthy color combinations.
Warm: Reds, oranges, yellows – cozy and inviting.
Cold: Blues, greens, purples – calm and professional.
Retro: Nostalgic colors from the 70s and 80s.
Vintage: Aged, muted tones with a classic feel.
Monochromatic: Variations of a single hue.
Gradient: Smoothly transitioning color sequences.
Frequently Asked Questions (FAQs)
Is the EnigmaEasel gradient generator free to use?
Yes — the tool is completely free with no registration, account, or payment required. Every feature, export format, and gradient type is available without restriction for all users.
What types of gradients can I create?
You can create six distinct types: linear (directional), radial (circular or elliptical), conic (angular sweep), mesh (multi-point blended), gradient steps (discrete palette), and text gradients (typography with gradient fill). Additionally, you can extract a custom gradient palette from any uploaded image.
Can I export the gradients as CSS or Tailwind CSS code?
Yes. Linear gradients export as native Tailwind utility classes (e.g., bg-gradient-to-r). Because Tailwind doesn’t have native utilities for all complex types, radial and conic gradients export as Tailwind inline styles. All types also provide standard CSS declarations with proper vendor prefixes.
What image file formats and sizes are available for download?
You can download your designs as PNG (with alpha channel transparency), JPG, SVG, and PDF. We provide several one-click presets:
Web Default: 1280×720
Instagram Square: 1080×1080
Twitter/X Header: 1200×675
Web Banner: 1920×400
Thumbnail: 600×200
Custom: Enter any dimensions you need.
How do I extract a gradient from a photo?
Simply upload a PNG, JPG, or WEBP image. The tool uses a k-means color quantization algorithm to identify the 3–8 most dominant colors. You can re-run the extraction with randomized pixel sampling to discover different color harmonies within the same photo.
Which color formats does the tool support?
The generator is compatible with HEX, RGB, RGBA, HSL, HSLA, CMYK, and LCH. You can view, tweak, and copy any color in these formats at any point during your design process.
Can I save my gradients to work on them later?
Yes. All modes support saving to your browser’s local storage. This allows your work to persist between sessions on the same device without needing an account. Just keep in mind that clearing your browser cache or storage will remove these saved items.
What exactly is a mesh gradient?
A mesh gradient uses multiple color points distributed across a canvas rather than a single line or circle. Each point radiates its own color field; where they overlap, they blend into organic, fluid shapes. This is a staple of modern “Glassmorphism” and “Aurora” UI design trends.
What is OKLCH interpolation and why should I use it?
OKLCH is a perceptual color space designed to match how the human eye actually perceives light and color. Unlike standard RGB (which can look “muddy” in the middle), OKLCH interpolation ensures that gradient steps look visually consistent in brightness and saturation. It is the gold standard for professional UI palettes.
Does the gradient generator work on mobile devices?
Yes. The tool is fully responsive and browser-based. While advanced modes like the Mesh Gradient (which requires precise dragging of multiple points) are best experienced on a desktop with a mouse, all features remain accessible on modern mobile browsers.
Can I use these gradients for commercial projects?
Absolutely. All gradients generated are yours to use freely for personal, commercial, and client projects. EnigmaEasel claims no ownership or copyright over the assets you create using this tool.
How do I manually apply a text gradient in CSS?
The tool handles the heavy lifting by generating the specific properties required: background-clip: text and -webkit-text-fill-color: transparent. When you use the Text Gradient mode, simply copy the generated snippet and paste it into your CSS file.
What is the difference between LCH and OKLCH?
While both are perceptual spaces, OKLCH is a refined version of LCH. It specifically fixes “hue-shift” issues that occur in the blue and purple ranges in LCH. Using OKLCH generally results in smoother, more predictable transitions that look more “natural” to the eye.
Is there an API available for programmatic use?
Currently, this is a client-side web application and does not offer an external API. However, the code snippets we generate are designed to be highly portable. If you need to generate gradients programmatically, the exported CSS and SVG logic can be easily integrated into your own JavaScript functions or libraries like chroma.js.