CSS Gradient Generator - Linear & Radial Gradients

What is a CSS Gradient?

CSS gradients create smooth color transitions directly in the browser without requiring image files. Instead of loading separate PNG/JPG background images (HTTP requests, file size overhead, resolution constraints), gradients are defined as CSS background-image values and rendered natively by the browser.

Three gradient types:

• Linear gradients: Color transitions along a straight line at any angle (0deg = horizontal, 90deg = vertical, 45deg = diagonal).
• Radial gradients: Color transitions radiating from a center point in circular or elliptical patterns.
• Conic gradients: Color transitions rotated around a center point, creating pie chart or color wheel effects.

Advantages over images:

• Infinite scalability—no pixelation at any size or resolution (vector-based rendering)
• Zero HTTP requests—faster page load times, reduced bandwidth
• Smaller file sizes—gradient CSS code is typically 50-200 bytes vs. 5-50KB for gradient images
• Dynamic adjustments—change colors, angles, stops via CSS without regenerating images
• Responsive by default—automatically adapt to container size changes

Browser support: All modern browsers support unprefixed gradients (Chrome 26+, Firefox 16+, Safari 7+, Edge 12+, iOS Safari 7+, Android 4.4+). No vendor prefixes (-webkit-, -moz-) needed for gradients created after 2014.

Linear Gradients - Directional Color Flow

Linear gradients create color transitions along a straight line defined by an angle parameter. The gradient line extends from the element’s center in the specified direction, with colors distributed along that line.

Syntax: background: linear-gradient(angle, color-stop1, color-stop2, ...);

Angle definitions:

• Degrees (0-360deg): Precise directional control. 0deg = left to right, 90deg = top to bottom, 180deg = right to left, 270deg = bottom to top. Negative angles work (e.g., -45deg = 315deg).
• Keyword directions: to right (0deg), to bottom (90deg), to left (180deg), to top (270deg), to top-right (45deg), to bottom-right (135deg), etc.

Color stops syntax:

• Simple two-color: linear-gradient(90deg, #667eea, #764ba2) — colors evenly distributed from top (blue-purple) to bottom (purple).
• Positioned stops: linear-gradient(90deg, #667eea 0%, #764ba2 100%) — explicit positions (0% = start, 100% = end). Stops outside 0-100% extend color infinitely.
• Multi-color: linear-gradient(45deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%) — rainbow diagonal with 5 evenly-spaced colors.
• Hard color transitions: linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%) — sharp horizontal split (red top half, blue bottom half).

Common use cases:

• Hero section backgrounds with diagonal flow (45deg/135deg)
• Button hover effects with subtle vertical gradients (90deg, similar colors)
• Header/footer backgrounds with horizontal emphasis (0deg/180deg)
• Text backgrounds with background-clip: text for gradient text effects
• Overlays for image darkening (linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)) over photo)

Performance tip: Simple 2-3 color gradients render faster than 10+ color complex gradients. For photo-realistic backgrounds with many subtle transitions, use actual images—they’ll perform better.

Radial Gradients - Circular Color Flow

Radial gradients create color transitions radiating outward from a center point in circular or elliptical patterns. Unlike linear gradients (straight lines), radial gradients emanate concentrically.

Syntax: background: radial-gradient(shape size at position, color-stops);

Shape parameter:

• circle: Perfectly round gradient regardless of element aspect ratio (1:1 ratio maintained)
• ellipse (default): Gradient conforms to element’s bounding box, creating oval if element isn’t square

Size parameter (controls gradient spread):

• closest-side: Gradient edge touches closest element edge—smallest possible gradient, creates vignette effects
• closest-corner: Gradient edge touches closest element corner—small gradient, good for spotlight effects
• farthest-side: Gradient edge touches farthest element edge—medium gradient, balanced spread
• farthest-corner (default): Gradient edge touches farthest element corner—largest gradient, fills entire element

Position parameter (center point):

• Keywords: center (default), top, bottom, left, right, top left, bottom right, etc.
• Percentages: at 30% 70% (30% from left, 70% from top), at 0% 0% (top-left corner), at 100% 100% (bottom-right corner)
• Pixel values: at 150px 200px (absolute positioning from top-left)

Examples:

• radial-gradient(circle, #667eea, #764ba2) — circular purple gradient from center
• radial-gradient(ellipse farthest-corner at 70% 30%, yellow, orange, red) — sunset spotlight in top-right
• radial-gradient(circle closest-side at center, white, transparent) — vignette darkening (overlay on images)

Common use cases:

• Circular button backgrounds with centered highlights
• Spotlight effects for hero sections (off-center position)
• Vignette overlays to darken image edges (radial-gradient(ellipse, transparent 50%, rgba(0,0,0,0.7) 100%))
• Background textures with layered radial gradients
• Focus points drawing attention to specific element areas

Conic Gradients - Rotational Color Wheels

Conic gradients transition colors rotated around a center point, sweeping 360 degrees like a color wheel or pie chart. Unlike radial (center-outward) or linear (directional line), conic gradients rotate concentrically.

Syntax: background: conic-gradient(from angle at position, color-stops);

From angle parameter (rotation):

• Controls where the gradient starts rotating (default 0deg = 12 o’clock position)
• from 0deg starts at top, from 90deg starts at right, from 180deg starts at bottom, from 270deg starts at left
• Useful for aligning gradient start position with design elements

At position parameter (center point):

• Same as radial gradients: at center (default), at 50% 50%, at top left, etc.
• Off-center positions create asymmetric rotational effects

Color stops (angular positions):

• Defined in degrees (0deg-360deg) instead of percentages
• red 0deg (top), blue 120deg (bottom-left), green 240deg (bottom-right), red 360deg (completes circle)
• Hard stops create pie chart segments: conic-gradient(red 0deg, red 120deg, blue 120deg, blue 240deg, green 240deg, green 360deg)

Examples:

• conic-gradient(from 0deg, red, yellow, green, cyan, blue, magenta, red) — rainbow color wheel
• conic-gradient(from 45deg at 50% 50%, #667eea 0deg, #764ba2 180deg, #667eea 360deg) — two-color rotational gradient
• conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg) — four-color pie chart

Common use cases:

• Color picker wheels in design applications
• Circular progress indicators (e.g., conic-gradient(blue 0deg 120deg, lightgray 120deg 360deg) for 33% progress)
• Loading spinners with animated rotation (@keyframes rotating conic gradient)
• Data visualization pie charts (combine with clip-path for true charts)
• Abstract geometric backgrounds and modern UI aesthetics

Browser support: Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. Older browsers fall back to solid background-color—provide fallback: background: #667eea; background: conic-gradient(...);

Color Stop Management

Color stops define transition points in gradients—each stop specifies a color and position. Effective stop management creates professional, purposeful gradients.

Adding color stops:

• Minimum 2 stops required (start and end colors)
• Maximum 10 stops recommended for performance and visual clarity
• This tool’s “Add Stop” button inserts new stops at midpoint positions
• Manually adjust positions by dragging sliders (0-100% for linear/radial, 0-360deg for conic)

Positioning strategies:

• Evenly spaced: red 0%, yellow 25%, green 50%, blue 75%, purple 100% — uniform transitions, rainbow effects
• Clustered: red 0%, orange 10%, yellow 20%, white 100% — intense start transition, long fade at end
• Hard stops: blue 0%, blue 50%, red 50%, red 100% — sharp color split with no transition
• Overlapping: blue 40%, red 60% — creates short transition zone (40-60%), longer solid color zones

Color selection tips:

• Analogous colors (adjacent on color wheel: blue-purple-pink) create harmonious, natural gradients
• Complementary colors (opposite on color wheel: blue-orange, red-green) create vibrant, high-contrast gradients but can muddy in middle
• Monochromatic (shades of one hue: light blue to dark blue) create subtle, professional backgrounds
• Triadic (3 colors evenly spaced on wheel: red-yellow-blue) create balanced, energetic gradients

Accessibility considerations:

• Ensure sufficient contrast for text readability (WCAG 4.5:1 ratio for normal text)
• Test gradients with text overlays on light and dark stops
• Avoid red-green combinations for colorblind users
• Provide solid color fallbacks: background: #667eea; background: linear-gradient(...);

Gradient Presets Library

This tool includes 12 professionally designed gradient presets covering common design aesthetics. Presets serve as starting points—click any preset to load into the editor, then customize colors, angles, and stops to match your brand.

Preset categories:

• Cool tones (Purple Dream, Ocean Blue, Cool Sky): Professional, trustworthy, tech/corporate aesthetics
• Warm tones (Sunset, Fire, Bloody Mary): Energetic, passionate, call-to-action buttons and hero sections
• Nature (Forest, Green Beach): Organic, eco-friendly, health/wellness brands
• Vibrant (Neon Life, Pink Bliss): Modern, youthful, creative industries and playful UI
• Bold (Aubergine, Purple Love): Luxury, premium products, fashion and lifestyle

Using presets effectively:

• Start with preset matching your brand’s color palette
• Adjust individual color stops to align with exact brand colors
• Modify angle to match design flow (horizontal headers, diagonal heroes, vertical sections)
• Add/remove stops to simplify or complexify transitions
• Save customized versions to History for reuse across projects

Creating custom preset libraries:

1. Design gradients matching brand guidelines (primary, secondary, accent colors)
2. Save each to History panel (stores 20 recent gradients)
3. Export CSS codes to SCSS variables file: $gradient-primary: linear-gradient(...);
4. Import SCSS file project-wide for consistent gradient usage
5. Document preset names and use cases in design system

Random Gradient Generator

The “Generate Random Gradient” feature creates unpredictable, often surprising gradient combinations—ideal for creative exploration, rapid prototyping, and breaking designer’s block.

How it works:

• Randomly selects gradient type (linear, radial, or conic)
• Generates 2-4 color stops with random hex colors
• Sets random angle (linear), position (radial/conic), and stop positions
• Displays result instantly with live preview

Creative workflow:

1. Click “Generate Random” multiple times rapidly
2. Save interesting results to History (click “Save to History”)
3. Refine saved gradients by adjusting specific colors/positions
4. Combine elements from multiple randoms (e.g., colors from random #1, angle from random #2)
5. Export finalized gradients to project

Use cases:

• Brainstorming sessions: Generate 20 randoms, save top 5, refine top 2
• Color palette discovery: Random gradients often combine unexpected colors beautifully
• A/B testing variations: Create multiple background options for conversion optimization
• Placeholder backgrounds: Quick temporary backgrounds during development
• Abstract art projects: Random gradients as base for further design work

Limitations:

• Random colors may clash (low contrast, poor accessibility)
• Not all randoms will match brand guidelines—treat as inspiration, not final product
• Lack intentional design thinking—use randoms to spark ideas, not replace strategy

Pro tip: Generate randoms with specific color palette by manually setting 1-2 stops to brand colors, then adding random stops between. This constrains randomness to brand-appropriate ranges.

Live Preview Modes

This tool offers four preview modes demonstrating how gradients render on different element types—each mode exposes unique gradient characteristics.

Box mode (default):

• Large square element (256x256px) showing full gradient spread
• Best for evaluating overall color transitions, balance, and aesthetic appeal
• Use for backgrounds, section dividers, full-width headers/footers
• Reveals edge behaviors (hard stops, fade-outs, positioning)

Button mode:

• Gradient applied to button element with padding and text
• Shows how gradients work on interactive elements
• Tests readability of white text over gradient (contrast check)
• Useful for call-to-action buttons, navigation items, badges
• Reveals how gradients appear on small, rounded elements

Text mode:

• Gradient applied to text using background-clip: text
• Demonstrates gradient text effects (requires transparency)
• Shows angle impact on text readability (horizontal vs. diagonal)
• Best for headlines, logos, hero text, branding elements
• Reveals legibility issues with complex multi-stop gradients

Card mode:

• Gradient applied to card header with white content area below
• Shows real-world component integration (common UI pattern)
• Tests gradient in context with other content elements
• Useful for pricing tables, feature cards, blog post cards
• Reveals how gradients interact with borders, shadows, content

Workflow recommendation:

1. Design in Box mode for full gradient view
2. Test in Button mode for UI component sizing
3. Validate in Text mode if using for typography
4. Confirm in Card mode for real-world context
5. Adjust based on each mode’s feedback

CSS Code Export Formats

Export gradients in three formats optimized for different development workflows—all produce identical visual results, choose based on your project structure.

CSS format:

.element {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

• Standard CSS rule for external stylesheets (.css files)
• Copy-paste into CSS files, <style> tags, or CSS-in-JS libraries
• Works with CSS cascade and specificity rules
• Reusable across multiple elements via class names
• Ideal for: External/internal stylesheets, utility classes, design systems

SCSS format:

$gradient: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

.element {
  background: $gradient;
}

• Sass/SCSS variable declaration for preprocessor workflows
• Store gradients as variables for project-wide reuse
• Supports Sass features: mixins, functions, interpolation, color manipulation
• Requires Sass compiler (Dart Sass, Node Sass, or build tool integration)
• Ideal for: Sass/SCSS projects, design token systems, theming, DRY principles

Inline style format:

style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);"

• HTML inline style attribute for direct element styling
• Highest CSS specificity—overrides external and internal styles
• No CSS file required—useful for HTML emails, CMSs with limited CSS access
• Dynamic styling in JavaScript: element.style.background = gradient
• Ideal for: Email templates (limited support), one-off elements, JS-generated styles, CMS constraints

Usage tips:

• Modern projects: Use CSS format with utility classes (.bg-gradient-purple) or CSS custom properties (--gradient-primary)
• Design systems: Use SCSS format with organized variable files (_gradients.scss)
• Email templates: Use inline format (note: gradient support limited to Apple Mail, newer Outlook versions, webmail clients)
• React/Vue/Angular: Use CSS-in-JS or inline styles with template literals

Gradient History & Reusability

The History panel stores your last 20 created gradients in browser localStorage, enabling quick access to previous designs without re-creating from scratch.

How History works:

• Auto-save: Every gradient modification auto-saves to history (no manual save needed for browsing history)
• Manual save: Click “Save to History” to explicitly bookmark current gradient
• Storage: Gradients stored in browser localStorage (device-specific, persists across sessions)
• Capacity: Last 20 gradients retained—older entries auto-deleted as new ones added
• Reload: Click any history thumbnail to instantly load gradient back into editor
• Clear: “Clear History” button removes all saved gradients (cannot undo—use carefully)

Storage details:

• What’s saved: Gradient type, angle, color stops (colors + positions), radial/conic settings, timestamp
• What’s not saved: Preview mode, output format selection, UI state
• Format: JSON array in localStorage key gradient-history
• Size: ~100-300 bytes per gradient, ~6KB for 20 gradients (negligible storage)

Privacy & offline:

• All data stored client-side in browser—never uploaded to servers
• Works completely offline after initial page load
• Clearing browser data erases history
• No cross-device sync (device-specific localStorage)

Workflow best practices:

1. Design multiple gradient variations for same project
2. Save each variation to history
3. Compare variations by reloading from history panel
4. Export final choices to code files
5. Document exported gradients in design system/style guide

Cross-device workflow: For sharing gradients across devices or team members:

1. Create gradients and export CSS codes
2. Copy codes to shared document (Google Docs, Notion, Figma)
3. Or commit to version control (Git) in SCSS variables file
4. Team members paste codes into tool to reload gradients
5. Future enhancement: Export/import history as JSON file

Backup recommendation: Export important gradients to external files—localStorage is not permanent (browser cache clears, device failures, accidental clears). Maintain gradient library in:

• SCSS variables file: $gradient-primary: linear-gradient(...);
• CSS custom properties: :root { --gradient-primary: linear-gradient(...); }
• Design system documentation with visual swatches
• Figma/Sketch component libraries for designer handoff