Qu'est-ce que Générateur de dégradés ?
The CSS Gradient Generator creates linear, radial, and conic CSS gradients through a visual editor. Add and position color stops, adjust gradient direction or shape, preview the result in real time, and copy the complete CSS background declaration ready to paste into your stylesheet — no manual CSS gradient syntax memorization required.
CSS gradients are among the most powerful and commonly used design techniques in web development. They appear in hero sections, button states, card backgrounds, progress bars, and countless UI elements. The gradient syntax is easy to get wrong — especially for multi-stop gradients, precise angles, and radial gradient positioning. Our generator handles the syntax while you focus on the visual result.
Preset gradients for common combinations let you start from professionally curated base palettes and customize from there. The output is a complete background property value, ready to copy directly into your CSS without any modification.
Cas d'utilisation
Voici les façons les plus courantes d'utiliser Générateur de dégradés au quotidien.
Hero Section Backgrounds
Gradient backgrounds add depth to hero sections without image assets. A subtle dark-to-slightly-lighter diagonal gradient prevents the flat appearance of solid colors. The generated CSS replaces a solid background-color with a single background property using the gradient value.
Button and Interactive Element Depth
Subtle gradients on buttons create a sense of dimension. A linear gradient from a slightly lighter shade at the top to the base color at the bottom mimics a light source above — a classic skeuomorphic touch that improves perceived affordance and tactility.
Data Visualization Fills
Chart bars, progress indicators, and gauge fills use gradients for visual richness. A gradient fill from a lighter to darker variant of the data color adds depth without introducing a distracting second hue. Conic gradients are particularly useful for pie and donut segments.
Loading Skeleton Animations
Skeleton screens use animated gradients (shimmer effects) to indicate loading. The shimmer is a linear gradient that moves across the element via CSS animation. Generate the base gradient, then add background-size: 200% 100% and animate background-position to create the sliding shimmer effect.
CSS Text Gradient Effects
Gradient-colored headings are a popular design trend that adds visual richness to hero sections and feature callouts. The CSS technique uses background-clip: text with a gradient background: apply the gradient as a background, clip it to the text shape, and set color to transparent so the gradient shows through. Generate the gradient values here and combine them with the -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; CSS pattern for a vivid gradient heading.
Overlay Gradients for Readable Text on Images
Photography and video backgrounds often have variable brightness that makes overlaid text hard to read. A dark gradient overlay — linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%) — ensures the text area has sufficient contrast while keeping the image visible in other areas. Generate the overlay gradient here, adjust opacity stops until text is readable, and apply it as a pseudo-element or div over the background image.
Exemples
Sunset Hero Gradient
Warm diagonal gradient for a hero section background.
background: linear-gradient(to bottom right, #ff512f, #f09819); Radial Center Glow
Radial glow effect emanating from center — useful for dark-mode hero sections.
background: radial-gradient(circle at center, #7928ca 0%, #000000 70%); CSS Text Gradient
Apply a gradient to heading text using background-clip technique.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; Générateur de dégradés vs uigradients.com
Our gradient generator versus curated gradient gallery sites.
| Caractéristique | Toolorah | uigradients.com |
|---|---|---|
| Custom color stops | Yes — full control | Fixed presets only |
| Linear + radial + conic | All three types | Linear only |
| Angle/direction control | Yes | Limited |
| Ready-to-copy CSS output | Yes — full property | Yes |
| Curated beautiful presets | Some presets | Large curated collection |
| Works offline | Yes | No |
| No account required | Yes | Yes |
Conseils d'utilisation de Générateur de dégradés
- For subtle UI gradients, keep both color stops within 10-15% lightness of each other.
- Multiple stops at the same position create hard color transitions (no gradient): red 50%, blue 50%.
- For animated shimmer: add background-size: 200% 100%; and animate background-position from -100% to 100%.
- Test gradients in both light and dark mode — a gradient that looks great on light backgrounds may disappear on dark ones.
- Conic gradients require the at keyword: conic-gradient(from 0deg at center, red, blue, red).
Foire aux questions
What is the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight line in a specified direction (to right, to bottom, 45deg). Radial gradients transition from a center point outward in a circular or elliptical shape — useful for spotlight effects and radial data visualizations. Conic gradients transition in a rotation around a center point, like sectors of a pie chart or a color wheel. All three can have multiple color stops at specified positions and are applied using the CSS background property.
How do gradient angles work in CSS?
CSS gradient angles measure from the top, rotating clockwise: 0deg points upward (to top), 90deg points right (to right), 180deg points downward (to bottom), 270deg points left. "to right" equals 90deg, "to bottom" equals 180deg, "to bottom right" equals approximately 135deg. The angle describes the direction the gradient moves toward. A 45deg gradient flows from the bottom-left toward the upper-right.
Can I use transparency in a gradient?
Yes. Use rgba() or hsla() values with an alpha channel in color stops. The keyword "transparent" works but is equivalent to rgba(0,0,0,0) — transparent black — which creates a gray transition when fading to transparent. For a clean fade without the gray cast, use rgba(r, g, b, 0) where r/g/b match your base color rather than the transparent keyword.
How do I create a hard color transition in a gradient?
Place two color stops at the same percentage position: linear-gradient(to right, red 50%, blue 50%). This creates an immediate color transition at the 50% mark with no gradient blend between them. This technique is used for striped backgrounds, half-and-half designs, and progress bar fills. Placing stops very close together (49%, 51%) creates a subtle blur at the transition instead of a hard edge.
How do I make a gradient background that repeats?
Use repeating-linear-gradient() or repeating-radial-gradient() instead of the standard functions. Define one cycle of the pattern and it tiles automatically. Example: repeating-linear-gradient(45deg, #000 0, #000 10px, transparent 10px, transparent 20px) creates diagonal black stripes 10px wide with 10px transparent gaps. The pattern repeats across the entire element without needing to specify total size.
How do I animate a CSS gradient?
CSS gradients cannot be directly transitioned with CSS transition because they are not interpolatable values in the same way colors are. The standard workaround: set background-size: 200% 200% and animate background-position. The gradient appears to shift as its oversized background moves. For shimmer effects, animate from background-position: -200% 0 to 200% 0. For more complex animated gradients, use @keyframes with the gradient regenerated at each keyframe — smooth animation requires multiple gradient stops at carefully chosen positions for each frame.
Does the CSS gradient syntax work in all browsers?
Linear and radial gradients have been supported in all major browsers since 2012 (IE 10+, Chrome 26+, Firefox 16+, Safari 6.1+). Conic gradients are supported in all modern browsers as of 2021 (Chrome 69+, Firefox 83+, Safari 12.1+) but not in Internet Explorer. The -webkit- prefix is no longer required for any gradient type in modern browsers. For very old browser support, add a solid color fallback before the gradient: background: #7928ca; background: linear-gradient(...);