CSS Gradients

A free resource library of 180 beautiful linear gradients. Each gradient is carefully designed with harmonious colors and can be directly copied as CSS code for use in web design, UI interfaces, background decoration, and other scenarios. All gradients are from the webgradients.com project.

Key Features

Gradient Preview

The page displays 180 different gradient effects, each presented as a circular pattern with clearly visible color transitions and directions. Gradients include various tones and styles:

• Warm tones: Red, orange, yellow gradient series
• Cool tones: Blue, green, cyan gradient series
• Neutral tones: Gray, brown, beige gradient series
• Vibrant colors: High saturation bright gradients
• Soft colors: Low saturation gentle gradients
• Multi-color blends: Complex gradients with 3 or more colors

Quick Copy

Each gradient card provides one-click CSS code copy functionality. Click the "Copy CSS" button to copy the complete background-image property code to clipboard for direct pasting into projects.

Color Extraction

Below each gradient displays all color blocks composing that gradient. Click any color block to individually copy that color's hexadecimal code, convenient for using the same colors elsewhere.

Quick Navigation

Page top provides thumbnail grid, each small square displaying corresponding gradient effect. Hover mouse to view gradient name, click thumbnail to automatically scroll to that gradient for quick location of desired effects.

Usage Instructions

Browse Gradients

1. Open CSS Gradients page
2. Scroll down to browse all gradient effects
3. Each card displays: gradient name, circular gradient preview, component color blocks, copy CSS button

Quick Location

1. View thumbnail grid at page top
2. Hover mouse to see gradient names
3. Click thumbnails to automatically scroll to that gradient

Copy CSS Code

1. Find preferred gradient
2. Click "Copy CSS" button in card's upper right corner
3. Button text turns green indicating successful copy
4. Paste into CSS file or style tag
5. Apply to elements requiring gradient effects

Copy Individual Colors

1. View color blocks below gradient
2. Click any color block
3. That color's hexadecimal code will be copied
4. Block displays green border indicating successful copy

Application Scenarios

Web Backgrounds

Add gradient backgrounds to web pages for more layered and visually appealing pages. Can be used for main page backgrounds, section backgrounds, card backgrounds, button backgrounds.

Usage example:

.hero-section {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

UI Element Decoration

Add gradient effects to interface elements: button and link hover effects, navigation bar backgrounds, sidebar decoration, tags and badges.

Dividers and Borders

Use gradients to create unique dividers:

.divider {
  height: 2px;
  background-image: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

Text Effects

Combine with CSS properties to create gradient text:

.gradient-text {
  background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Image Overlays

Overlay semi-transparent gradients on images to improve readability:

.image-overlay {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
}

Usage Tips

Choose Appropriate Gradients

Based on purpose

• Background gradients: Choose soft, low-contrast gradients to avoid interfering with content
• Decorative elements: Can choose vibrant, high-contrast gradients
• Text backgrounds: Ensure text color has sufficient contrast with gradient for readability

Consider brand colors

• Look for gradients close to brand primary colors
• Extract colors from gradients for other design elements
• Maintain overall color coordination

Adjust Gradient Parameters

Copied CSS code can be further modified:

Change angle

/* Original */
linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)

/* Change to vertical gradient */
linear-gradient(180deg, #a1c4fd 0%, #c2e9fb 100%)

/* Change to diagonal gradient */
linear-gradient(45deg, #a1c4fd 0%, #c2e9fb 100%)

Adjust color positions

/* Concentrate color transition in middle */
linear-gradient(120deg, #a1c4fd 40%, #c2e9fb 60%)

Add transparency

/* Use rgba to add transparency */
linear-gradient(120deg, rgba(161,196,253,0.8) 0%, rgba(194,233,251,0.8) 100%)

Combined Use

Multiple gradients can be layered:

.element {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.2), transparent),
    linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

Browser Compatibility

Modern browsers support linear-gradient, but for better compatibility add prefixes and fallback solutions:

.element {
  background: #a1c4fd; /* Fallback solid color background */
  background-image: -webkit-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

Important Notes

• All gradients from webgradients.com open-source project, free for personal and commercial use
• Gradient effects may vary slightly in different browsers; testing in mainstream browsers recommended
• When using gradients, pay attention to contrast with content, ensuring text is clearly readable
• Excessive gradient use may make design appear cluttered; moderate use recommended
• Copied CSS code uses hexadecimal color values, also convertible to rgb or hsl formats
• After clicking copy, manual paste required; confirm successful copy before closing page
• Gradient angle 0deg is bottom to top, 90deg is left to right, and so on
• Can adjust gradient parameters in real-time in browser developer tools to view effects
• Light gradients on dark backgrounds, dark gradients on light backgrounds produce better effects
• For radial or conic gradients, manually modify CSS code type