The gradient studio, reimagined
310 handcrafted presets across 22 gradient modes — 3D, Shader FX, Mesh, Metaball, Chrome, Holographic, and more. Tweak any one and create millions of unique combinations.
Indigo Mist · scene21 engines, infinite possibilities
From simple CSS to GPU-powered shaders. Each type is a full engine with its own controls, presets, and export options.
Mesh
Draggable color points that blend into organic, fluid compositions.
Holographic
Iridescent holographic sheen that shifts hue with viewing angle.
3D
WebGL-powered waves and surfaces with lighting and camera controls.
WebGL
GPU-accelerated noise, flow fields, and distortion effects.
Chrome
Liquid chrome reflections with adjustable bevel and refraction.
Neon
Glowing neon tubes with thickness, glow falloff, and color animation.
Shader FX
Warps, metallic lighting, iridescence, halftone, and surface effects.
Bokeh
Soft bokeh light spots with depth-of-field falloff and color variety.
Particle
Wave, cosmic, and aurora particle fields with motion controls.
Metaball
Fluid organic shapes that merge and separate with smooth blending.
Blob
Organic blob shapes that flow with per-ball gradient colors.
Neural
Organic neural flow inspired by domain-warped noise fields.
Metal
Brushed metallic surfaces with anisotropic highlights and tinting.
Orb
3D sphere gradients with Fresnel rim glow and animated surfaces.
Scene
Static banner gradients with aurora pillars, horizon glow, and glass overlays.
Morph
Morphing soft shapes that drift and blend through smooth transitions.
Geometric
Patterns, grids, and shapes — pick a single shape or mix dozens.
Topo
Topographic contour lines with adjustable density and color drift.
Smoke
Realistic smoke gradients with layered blends and parallax depth.
Voronoi
Voronoi cell patterns with edge styling and distortion control.
Ripple
Flowing ribbon stripes with layered depth, wave animation, and 3D shading.
Everything you need
Professional gradient tools with the simplicity of a design app.
10+ Gradient Engines
Static, animated, mesh, 3D, WebGL, metaball, blob, layered, crystal, and shader FX — all in one studio.
Real-time Preview
See every change instantly. Fullscreen mode with hero preview to visualize gradients in context.
Multi-format Export
CSS, Tailwind, React, SVG, PNG, JSON, MP4, and WebM. Copy code or download assets in one click.
WebGL Shaders
GPU-accelerated rendering with warps, metallic lighting, iridescence, and surface effects.
Animation Engine
15 animation types with speed, intensity, direction, and easing controls. Export as MP4 or WebM video.
Color Spaces
Interpolate in sRGB, HSL, OKLCH, OKLab, LCH, and Lab for perceptually smooth transitions.
Ship in any format
One gradient, twelve formats — code, images, and video. Copy or download, ready for production.
Simple pricing
Start free. Upgrade when you need clean exports, video, or commercial use.
Free
Explore — watermark on export
- Full editor — all 22 modes to play with
- Code export for static, animated & mesh gradients
- — in CSS, Tailwind, SVG, HTML
- 1080p PNG export (watermarked)
- Code export for shader modes
- React, Swift, Kotlin, Flutter code
- MP4, WebM video export
Starter
$84/yr · no watermark
- Everything in Free
- Code export for 16 shader modes (chrome, holographic, neon, …)
- — in HTML and React
- React component on every CSS-recreatable mode
- PNG export up to 2K — no watermark
- All 310 handcrafted presets + 10,000+ palettes
- All 7 color spaces (OKLCH, OKLAB, …)
- 3D / Orb / Particle code export
- Native mobile code (Swift, Kotlin, Flutter, RN)
Pro
$264/yr · video + 4K included
- Everything in Starter
- Code export for 3D, 3D-Loop, Orb, Tube, Shader FX, Particle
- Native mobile code — Swift, Kotlin, Flutter, React Native
- PNG export up to 4K + social/custom sizes
- MP4 + WebM video export — 1080p, 10/month
- Commercial use in your projects
- Priority support
Studio
$708/yr · 8K + 4K video
- Everything in Pro
- PNG export up to 8K — maximum resolution
- 4K video export — 50 per month
- Early access to every new mode
- Priority support
Secure payment via Stripe · Cancel anytime · Plans prorate instantly on upgrade
Frequently asked questions
Can I use Gradient Studio for free?
Yes. The free plan gives you full access to all 22 gradient modes, the editor, and PNG export up to 1080p (with a small watermark). No credit card required.
Can I use exports commercially?
Free plan exports are for personal use. Starter, Pro, and Studio plan exports are licensed for commercial use in your own projects. For client work or resale, an Extended or Exclusive license is available from the export panel.
What's the difference between Extended and Exclusive licenses?
Extended license lets you use the gradient in unlimited client and commercial projects. Exclusive license means we never resell that exact gradient configuration to anyone else — it's yours alone, with a signed certificate.
Can I cancel my subscription at any time?
Yes — cancel from your account page in one click. You keep access until the end of your billing period. No questions asked.
Do video exports have limits?
Pro plan includes 10 video exports per month (MP4/WebM at 1080p). Studio includes 50 per month, including 4K video. Limits reset on the 1st of each UTC month.
What payment methods do you accept?
All major credit and debit cards via Stripe. Payments are processed securely — we never store your card details.
Beautiful gradients on every new tab
Animated gradients, focus timer, tasks, notes, weather, and 800+ daily quotes. Your most productive new tab, completely free.