Ggglitch
FREE
SVG generator for glitchy backgrounds. Futuristic glitch shapes. 3 styles. Gradient or solid. Copy, save SVG.
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.
- Match the use case: Rainbow and gold gradients read playful; dark theme gradient presets suit product UI and code editors.
- Headers and heroes: For a light grey header, choose low-contrast grey-green or soft blue stops so navigation text stays readable.
- Check contrast: Test copy on the lightest and darkest stops—especially on red gradient and gold gradient heroes.
- Direction guides the eye: Rotate the blend so color flows toward CTAs or key content.
- 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
Have questions? We have answers.
Related tools
More tools from SVG Generators.
Shader Gradient
FREEShader gradient generator for animated backgrounds and gradient shading—customize on shadergradient.co, export for web and Framer.
ColorFlow
FREEMesh gradient generator for pastel gradients and multi-color blends—ColorFlow on ls.graphics; edit points, export on the live app.
Ssscales
FREEGradient scale SVG generator. Noise-based circle patterns. Hue range, saturation. Smooth or pixelated. Randomize, copy, save.
Vvvortex
FREESVG spinning circle background generator. Motion vortex feel. Gradient or solid. Fade modes. Randomize, copy, save.
Hhhorizon
FREESVG generator for futuristic Cyberpunk backgrounds. Striped gradients. Circles, segment, opacity. Web, album covers.