Loading Gradient Generator
Initializing...

Dark Gray and Red Gradient

Color Stops

Preset Library

The Complete Guide to Your Gradient Generator

From basic gradient creation to advanced features, this guide explains every tool and function. Find what you need and master gradient design.

This is a professional gradient creation tool that works entirely in your browser. You create gradients by adding color stops along a gradient bar—each stop represents a color and its position in the gradient.

The basic workflow:

  1. Click or double-tap the gradient bar to add a new color stop
  2. Click on any stop to select it and edit its color and position
  3. Drag stops left or right to reposition them
  4. Adjust the angle slider to rotate linear gradients
  5. Switch between linear and radial gradient types
  6. Download your creation or copy the CSS code

The preview updates instantly as you make changes, giving you real-time visual feedback.

This gradient generator is designed for anyone who needs beautiful, professional gradients:

For Web Designers & Developers:

Create stunning background gradients for websites, landing pages, and web applications. Export as CSS code for instant implementation, or download high-resolution images for mockups and presentations.

For UI/UX Designers:

Design modern interface elements with smooth color transitions. Perfect for buttons, cards, headers, and hero sections. The extensive preset library provides inspiration while the editor gives you complete creative control.

For Social Media Managers:

Generate eye-catching backgrounds for Instagram stories, Facebook posts, Twitter headers, and other social media content. Download in pre-configured sizes optimized for each platform.

For Graphic Designers:

Create gradient backgrounds for posters, flyers, presentations, and digital art. Export as SVG for vector graphics or PNG for raster images in any custom dimension.

For Brand Designers:

Develop cohesive gradient systems for brand identities. Browse curated collections organized by theme (Popular Brands, Sunset & Sky, Ocean & Water, Nature & Earth, and more) for inspiration.

Adding a new color stop:

  • Desktop: Click anywhere on the gradient bar
  • Mobile/Tablet: Double-tap the gradient bar where you want to add the stop

Editing a color stop:

  • Click or tap on any color stop to select it (it will be highlighted with a blue border)
  • Use the Color field to change its color—you can type a HEX code, color name, or click the field to open the visual color picker
  • Use the Position slider to adjust where the stop appears (0% = left edge, 100% = right edge)
  • Or simply drag the stop left and right along the gradient bar

Removing a color stop:

Select the stop you want to delete, then click the red trash can button in the editor controls. Note: You must have at least 2 color stops to maintain a valid gradient.

The Color input field is extremely flexible and supports multiple formats:

  • HEX codes: #FF5733 or #F57 (with or without the # symbol)
  • Named colors: Type common color names like "red," "sky-blue," "forest-green," or "coral"
  • Visual picker: Click directly on the color field to open an interactive color picker with swatches and a gradient selector

The tool uses a comprehensive database of over 1,000 named colors, so you can type descriptive names and it will find the closest match. This makes it easy to create gradients by simply typing "sunset-orange," "ocean-blue," or "mint-green."

Angle Control (0° - 360°):

The angle slider rotates linear gradients around a full circle:

  • 0°: Left to right →
  • 90°: Bottom to top ↑ (default)
  • 180°: Right to left ←
  • 270°: Top to bottom ↓
  • 45°, 135°, etc.: Diagonal angles

Simply drag the slider or type a specific angle value to rotate your gradient precisely.

Type Toggle (Linear vs. Radial):

  • Linear: Colors transition in a straight line (affected by the angle setting)
  • Radial: Colors radiate outward from the center in a circular pattern (angle setting has no effect)

Switch between these two types to create dramatically different visual effects with the same color stops.

These one-click actions help you experiment, refine, and export your gradients:

🔀 Shuffle:

Randomly reorders the colors of your existing color stops while keeping their positions. Great for discovering unexpected combinations from your current palette.

🎲 Random:

Generates completely new random colors for all your stops. Perfect for creative exploration and breaking out of color ruts.

🔗 Share:

Creates a unique URL for your gradient that you can bookmark, share with colleagues, or save for later. The URL encodes all your gradient settings (colors, positions, angle, type) so anyone who clicks it will see your exact creation. On mobile devices, this opens the native share menu.

📋 Copy CSS:

Opens a modal with 8 different CSS format options to copy your gradient code. Each format is optimized for different use cases:

  • Background Property: Simple background: declaration for quick use
  • CSS Class: Complete class definition ready to add to your stylesheet
  • Inline Style: Formatted for HTML style="" attributes
  • With Fallback Color: Includes solid background-color for older browsers
  • Browser Prefixed: Vendor prefixes (-webkit-, -moz-) for legacy browser support
  • SCSS Variable: Sass/SCSS variable format for preprocessor workflows
  • CSS Custom Properties: Modern CSS variables for maintainable, dynamic gradients
  • Tailwind CSS: Arbitrary value syntax for Tailwind projects

Each option shows a preview of the exact code that will be copied to your clipboard.

Click the 📥 Download button to reveal a comprehensive menu of export options:

Pre-configured Sizes (PNG):
  • 📱 Mobile (1080×1920): Optimized for phone wallpapers and mobile app backgrounds
  • 🖥️ Desktop HD (1920×1080): Standard Full HD resolution for desktop wallpapers and presentations
  • 🖥️ Desktop 2K (2560×1440): Higher resolution for modern displays and professional use
  • 📘 Facebook Cover (820×312): Perfect dimensions for Facebook page covers
  • 🐦 Twitter Header (1500×500): Exact size for Twitter/X profile headers
Custom Size (PNG):

Enter any width and height in pixels to generate a gradient at your exact specifications. Ideal for specific design requirements, print projects, or unusual aspect ratios.

💾 Download as SVG:

Exports your gradient as a scalable vector graphic. SVG files are:

  • Infinitely scalable without quality loss
  • Perfect for logos, icons, and web graphics
  • Editable in vector software like Adobe Illustrator or Inkscape
  • Significantly smaller file size than raster images

The Preset Library contains over 100 professionally designed gradients organized into themed collections:

Available Collections:
  • Popular Brands: Gradients inspired by Instagram, Spotify, Discord, Netflix, and more
  • Sunset & Sky: Warm, atmospheric gradients like Golden Hour, Fire Sky, and Twilight
  • Ocean & Water: Cool, aquatic tones from Deep Sea to Caribbean
  • Nature & Earth: Organic palettes like Forest, Moss, and Autumn
  • Metallic & Luxury: Rich, elegant gradients in Gold, Rose Gold, and Bronze
  • Neon & Electric: Bold, vibrant combinations like Cyber Purple and Plasma
  • Pastel Dreams: Soft, delicate gradients like Cotton Candy and Lavender
  • Bold & Vibrant: High-energy colors like Cherry, Watermelon, and Mango
  • Dark & Moody: Deep, dramatic palettes like Midnight and Shadow
  • Rainbow & Spectrum: Multi-color gradients including full Rainbow and Pride
Interacting with Presets:

Each preset card has three action buttons:

  • 👁️ View: Opens a fullscreen preview of the gradient
  • ✏️ Edit: Loads the gradient into the editor so you can modify it
  • 📥 Download: Opens download options specifically for that preset

You can also click directly on any preset card to instantly load it into the editor.

What they are: Gradient Collections are curated sets of thematically related gradients. Each collection focuses on a specific mood, season, industry, or design style.

How to access them: Collections appear as browsable links on the main gradient page. When you click a collection, you'll see:

  • A custom title and description explaining the collection's theme
  • Only the gradients included in that specific collection
  • The first gradient from the collection automatically loaded in the editor

Why they're useful: Instead of scrolling through all 100+ presets, collections help you quickly find gradients that fit your project's aesthetic. Whether you need corporate gradients, seasonal themes, or industry-specific palettes, collections provide focused inspiration.

Sharing and bookmarking: Collection URLs are unique and shareable. You can send a collection link to a client or team member, and they'll see the same curated set of gradients. The gradient you're editing is also preserved in the URL, so sharing becomes a powerful collaboration tool.

What it is: Fullscreen Mode expands your gradient to fill your entire screen, removing all interface elements for a pure, immersive view.

How to activate it: Click the expand icon (⛶) button in the top-right corner of the preview area.

Why use it:

  • Evaluate how your gradient looks at full scale
  • Present your work to clients or stakeholders
  • Capture high-quality screenshots without UI clutter
  • Get a better sense of color transitions and flow

How to exit: Click anywhere on the fullscreen gradient, press the Escape key, or click the compress icon (⛶) button again.

What gets saved in the URL:

Every time you make a change, the URL automatically updates to include:

  • All color stops (both color and position)
  • The current angle setting
  • Whether it's linear or radial
  • The active collection (if you're browsing one)

Benefits:

  • Bookmarking: Save the URL to return to your exact gradient later
  • Collaboration: Send the URL to colleagues who need to use or modify your gradient
  • Version control: Keep multiple URLs for different gradient variations
  • Client approval: Share a link for feedback without sending files

Named colors in URLs: The tool uses a smart algorithm that converts HEX codes to readable color names (like "coral" or "sky-blue") when possible. This makes URLs more human-friendly and easier to understand at a glance.

Privacy note: All gradient data is stored in the URL itself—nothing is saved to a server or database. Your gradients are completely private and exist only in the URLs you choose to save or share.

Yes! The gradient generator is fully optimized for touch devices with several mobile-specific features:

Touch-Optimized Controls:
  • Larger color stops: Color stops are bigger on mobile (32px) for easier tapping and dragging
  • Touch-friendly buttons: All buttons meet the 44-48px minimum touch target size
  • Double-tap to add: Double-tap the gradient bar to add new color stops
  • Smooth dragging: Optimized touch events for responsive color stop positioning
Mobile-Specific Features:
  • Haptic feedback: Subtle vibrations confirm your actions (on supported devices)
  • Native share menu: The Share button opens your device's native sharing interface
  • Gesture support: Swipe gestures on the preview area to adjust the angle
  • Responsive layout: The interface automatically reorganizes for portrait and landscape orientations
Safe Area Support:

The layout respects device safe areas (notches, home indicators) on iOS and Android devices, ensuring content is never hidden behind system UI elements.

Minimum supported browser versions for full functionality:

Desktop Browsers:
  • Google Chrome: Version 66 or later (released April 2018)
  • Mozilla Firefox: Version 63 or later (released October 2018)
  • Safari: Version 13.1 or later (released March 2020)
  • Microsoft Edge: Version 79 or later (released January 2020)
Mobile Browsers:
  • iOS Safari: iOS 13.4 or later
  • Chrome for Android: Version 66 or later
  • Samsung Internet: Version 9.2 or later
Why These Requirements?

The tool uses modern web technologies for optimal performance:

  • CSS Grid: For responsive, flexible layouts
  • CSS Custom Properties: For dynamic theming and styling
  • Modern JavaScript (ES6+): Including async/await and classes
  • Fetch API: For loading gradient collections
  • Clipboard API: For one-click CSS copying
Graceful Degradation:

Some advanced features require newer browsers:

  • Native share menu (mobile): iOS 12.2+, Chrome Android 61+
  • Haptic feedback: Chrome 32+, Firefox 16+
  • Backdrop blur effects: Chrome 76+, Firefox 103+, Safari 9+ (with -webkit- prefix)

Recommendation: For the best experience, use the latest version of your preferred browser. All modern browsers auto-update, so most users are already compatible.

Check your browser: If the gradient preview displays correctly and you can add color stops, your browser is fully compatible.

Color Name Database:

The tool uses a comprehensive database of over 1,000 named colors. When you type a color name or the system generates a shareable URL, it employs the CIELAB color space and Delta E (ΔE) formula to find the closest perceptual match. This ensures color names are accurate to human vision, not just mathematical proximity.

Gradient Rendering:

  • Linear gradients: Generated using CSS linear-gradient() with precise angle calculations
  • Radial gradients: Rendered using CSS radial-gradient() with circular symmetry
  • Real-time updates: All gradient changes are calculated instantly using pure JavaScript—no server requests required

SVG Export:

SVG gradients use <linearGradient> or <radialGradient> elements with properly calculated coordinates. Linear gradient angles are converted to SVG's x1/y1/x2/y2 coordinate system using trigonometric functions for perfect accuracy.

PNG Export:

PNG images are generated using the html2canvas library, which creates a high-resolution canvas element, renders your gradient onto it, then converts it to a downloadable image file. This ensures pixel-perfect accuracy at any size.

Application Performance:

  • The entire app runs client-side in your browser—no server communication needed
  • Gradient rendering is GPU-accelerated using native CSS
  • The UI updates in real-time with no perceptible lag on modern devices
  • Memory usage is minimal, even with complex gradients

Export File Sizes:

SVG files: Extremely small (typically 1-3 KB) because they store gradient definitions as mathematical formulas rather than pixels. A 4K gradient SVG is often smaller than a thumbnail PNG.

PNG files: Size varies by dimensions and complexity:

  • Mobile (1080×1920): ~50-200 KB
  • Desktop HD (1920×1080): ~50-200 KB
  • Desktop 2K (2560×1440): ~100-400 KB

Simple two-color gradients produce smaller files than complex multi-stop gradients. PNG uses lossless compression, so gradients compress very efficiently due to their smooth color transitions.

Storage & Privacy:

The tool does not use localStorage or any browser storage. Your gradient exists only in:

  • The current session (in-memory JavaScript objects)
  • The URL parameters (if you share or bookmark)

This means complete privacy—no data is ever saved to your device or sent to a server.

The gradient preview isn't displaying:
  • Check that your browser meets the minimum requirements (see above)
  • Try refreshing the page (F5 or Ctrl+R / Cmd+R)
  • Disable browser extensions that might block JavaScript
  • Clear your browser cache and reload
Color stops won't drag properly:
  • Make sure you're clicking directly on the circular color stop, not next to it
  • On mobile, try tapping and holding for a moment before dragging
  • Ensure no other elements are overlapping the gradient bar
Download button isn't working:
  • Check that your browser isn't blocking pop-ups or downloads
  • For custom size downloads, ensure you've entered valid numbers (positive integers only)
  • Try a different download format (SVG if PNG fails, or vice versa)
Copied CSS isn't working in my stylesheet:
  • Ensure you're pasting the entire background: property
  • Check for vendor prefix requirements in older browsers
  • Verify the element you're applying it to has a defined width and height
The page layout looks broken:
  • Try refreshing the page—this solves 90% of layout issues
  • Rotate your mobile device (portrait ↔ landscape) and back
  • Zoom to 100% if you've adjusted browser zoom
  • Update your browser to the latest version
Collections aren't loading:
  • Check your internet connection
  • Verify the collection name in the URL is correct
  • Try accessing from the main page's collection list

Still having issues? Try testing in a different browser to isolate whether it's a browser-specific problem or a general issue.

iColorpalette