GradientHub — Генератор градиентов для дизайнеров и разработчиков
Создавайте идеальные градиенты для веба и дизайна
Everything you need to craft production-ready gradients
GradientHub gives designers and developers a visual workspace to build, tweak, and export gradients in the exact format your project demands — no code guessing, no trial-and-error.
Instant CSS Output
Copy ready-to-paste background: linear-gradient(...) or radial-gradient(...) declarations. Supports angle notation, percentage stops, and HSL/HEX/RGB color formats. Works in every modern browser — Chrome 112+, Firefox 115+, Safari 16.4+.
SVG & PNG Export
Need a gradient for Figma, Illustrator, or a print mockup? Export as lossless SVG with embedded gradient definitions, or download PNG at resolutions up to 8192 × 8192 px. Perfect for raster previews and design handoff.
Angle & Stop Precision
Drag color stops along a 0–360° arc or type exact values. Add up to 12 stops per gradient. Fine-tune opacity per stop for layered, translucent effects that look great over photos and illustrations.
Gradient Presets Library
Start from 48 curated presets — from "Aurora Borealis" (deep teal → violet → magenta) to "Sunset Boulevard" (amber → rose → navy). Each preset ships with the exact CSS you can drop into your stylesheet in one click.
Contrast Checker Built In
Overlay white or black text on any gradient and see the WCAG 2.1 contrast ratio in real time. GradientHub flags combinations that fail AA (4.5:1) or AAA (7:1) so your UI stays accessible.
Save & Share Collections
Organize gradients into named collections like "Q3 Brand Refresh" or "Dark Mode Palette." Share a public link with your team or embed a live gradient picker into your Notion, Confluence, or design doc.
Popular gradients by the GradientHub community
Over 12,000 designers have shared their creations. Here are the top picks this month — each one is free to use, remix, or export.
"Midnight Ocean" by Elena Vasquez
A deep navy (#0B1D3A) fading through cerulean (#1E6091) to soft aqua (#7FDBDA). Used in 3,200+ projects. Ideal for dashboards and dark-mode backgrounds.
"Coral Sunrise" by Marcus Chen
Warm coral (#FF6B6B) blending into peach (#FFA07A) and ending in pale gold (#FFD166). Trending in mobile app headers and hero sections across SaaS startups.
"Neon Tokyo" by Aiko Tanaka
Electric magenta (#FF00FF) → cyan (#00FFFF) → deep purple (#4B0082). A three-stop radial gradient that pops on dark backgrounds. 1,800+ downloads this week.
"Sahara Dusk" by Priya Sharma
Terracotta (#E2725B) sliding into sand (#F4A460) and soft white (#FAF0E6). A subtle, accessible gradient loved for editorial and e-commerce layouts.
Works where you already design and build
GradientHub plugs into your existing workflow so you never have to leave your favorite tools.
Figma Plugin
Install the GradientHub plugin directly from the Figma Community. Apply any generated gradient to fills, strokes, and text with one click. Syncs with your saved collections so your team stays on brand.
VS Code Extension
Paste CSS gradients straight into your stylesheet. The extension auto-formats output to match your Prettier config and supports Tailwind's arbitrary value syntax (bg-[linear-gradient(...)]).
Sketch & Adobe XD
Export gradients as PNG overlays or SVG definitions that import cleanly into Sketch symbols and XD artboards. No color-shift surprises between tools.
API for Developers
Hit api.gradienthub.io/v1/gradients to fetch preset gradients as JSON, generate custom gradients programmatically, or build your own gradient picker into your product. 10,000 free requests/month.
Start building gradients in seconds
No account required. No watermarks. Just open the editor, pick your colors, and copy the CSS — it's that simple. GradientHub is free for personal and commercial use.