Cccoil
FREE
Free spiral SVG generator and spiral generator for the web. Adjust rotation, direction, and gradients, then copy or save scalable SVG spiral patterns.
CSS gradient library
Tool powered by uiGradients on uiGradients.
Browse rainbow, blue, red, green, gold, and black gradients with ready CSS. Copy HEX and background-image code from uiGradients in the browser for web and UI work.
What is uiGradients?
uiGradients is a community-built library of multi-color gradients for design and code. On this page you browse the official uiGradients.com (https://uigradients.com/) gallery: scroll hundreds of presets, preview full screen, and copy HEX or CSS. Whether you need a rainbow gradient for a hero, a blue gradient for a product page, or gradient black CSS for dark UI, you pick a preset and paste into your stylesheet or Figma.
Popular gradient colors
Designers often search by hue or use case. Preview these families in the gallery, then copy CSS.
Rainbow gradient: Multi-stop blends such as Unicorn Rainbow and Rainbow Blue—use for playful heroes, event pages, and social graphics.
Blue gradient: Cool blues from Hyper Blue to Visual Blue. Works for SaaS dashboards, gradients with blue accents, and blue gradient color pairs in headers.
Red gradient: Warm reds and sunset blends for alerts, promotions, and bold landing sections without building palettes from scratch.
Gold gradient: Coffee Gold and similar presets for premium branding, awards pages, and warm metallic UI highlights.
Green gradient: Neon Green, Emerald Sea, and green pastel gradient background options for fresh, organic, or eco-themed layouts.
Gray green gradient: Muted sage and gray-green blends for calm dashboards, cards, and interfaces that need subtle color—not flat grey alone.
Black & dark gradients: Black gradient background presets, gradient color black, and gradient with black for dark mode shells and gradient black CSS snippets.
Dark theme gradient: Deep navy, charcoal, and low-light blends suited to night mode apps, developer tools, and cinematic landing pages.
Library features
What you get in the uiGradients experience.
500+ curated presets
Community-vetted combinations from rainbow gradient to subtle grey blends—no color-picker trial and error.
Browse by dominant color
Filter toward blue, red, green, gold, or black families when you know the mood but not the exact stops.
Full-screen preview
Arrow keys change gradient direction so you see how a blend reads on a real viewport before you commit.
Copy HEX instantly
Click swatches to copy stop colors for Figma, Sketch, or hand-built linear-gradient rules.
Copy CSS in one click
Get background-image with vendor prefixes—ideal when you need gradient black CSS or any hue in production.
Figma plugin
Apply the same library inside Figma via the official uiGradients community plugin.
How to use a gradient in CSS
From browse to production in three steps.
Pick a preset
Scroll the gallery or think in color families—rainbow gradient, blue gradient, red gradient, or dark theme gradient.
Copy HEX or CSS
Copy color stops or use Get CSS for a full background-image block with fallbacks.
Paste into your project
Add to body, section, or header styles. Tweak angle or stops if your layout needs a lighter grey header band.
Design tips
Get stronger results from gradient backgrounds.
- 01
Match the use case
Rainbow and gold gradients read playful; dark theme gradient presets suit product UI and code editors.
- 02
Headers and heroes
For a light grey header, choose low-contrast grey-green or soft blue stops so navigation text stays readable.
- 03
Check contrast
Test copy on the lightest and darkest stops—especially on red gradient and gold gradient heroes.
- 04
Direction guides the eye
Rotate the blend so color flows toward CTAs or key content.
- 05
Pair with solid UI
Use bold gradients on marketing sections and flat surfaces on dense app chrome.
Who uses uiGradients?
Roles that rely on fast, copy-paste gradient inspiration.
Web developers: Ship gradient black CSS, blue gradient heroes, and dark theme gradient shells without writing palettes by hand.
UI/UX designers: Prototype headers, cards, and onboarding with tested color pairs.
Product marketers: Refresh landing pages with rainbow gradient or gold gradient accents for campaigns.
Design students: Study how stops and angles change mood across hue families.
Why use this gradient directory?
Benefits of using the directory page.
Free and open source
MIT-licensed library for personal and commercial projects.
Saves palette time
Skip hours in a color picker—start from community presets.
CSS-ready output
Copy production-friendly rules, not just swatches.
One tab with related tools
Browse backgrounds, noise, and raster tools in the same directory after you pick a gradient.
Frequently Asked Questions
Quick answers about this tool—open a question to read more.
Related tools
More tools from SVG Generators.
Ssshape
FREEFree svg blob generator and generator shape tool. Draw points for blob svg shapes, add gradients or patterns, then copy organic blobs for web and UI backgrounds.
Oooscillate
FREEFree wavy background SVG generator. Create wavy line SVG backgrounds, dividers, and wave patterns. Adjust amplitude, waves, and gradients. Copy or save SVG.
BGJar
FREEFree web page texture generator with SVG grids, curve backgrounds, and CSS-ready animated patterns. Open BGJar, customize colors, export SVG for sites and apps.
ColorFlow
FREEMesh gradient generator for pastel gradients, three-color blends, and smooth gradation. Open ColorFlow on ls.graphics—edit color points, export for web and UI.
Uuunion
FREECreate stunning mesh background designs with our free wavy gradient SVG generator. Customize colors, blur, and waviness. Export high-quality mesh backgrounds for web and UI.