Quick answer
What is Gradient Generator?
Build a CSS gradient in a live preview, combine linear, radial, conic, and repeating layers, adjust colour stops and transparency, then copy production-ready code for your project.
CSS Gradient Generator
Build CSS gradients visually, then copy or export the code.
Gradients for creators
Live previewColour picker
Editing #26FFB4 at 0% — layer 1.
100%
rgba(38, 255, 180, 1)
Gradient stops
Drag a handle to move a colour. The picker above edits whichever stop is selected.
0%52%
%
%
Preview and code
/* PixHolm CSS Gradient Generator */
.pixholm-gradient {
position: relative;
isolation: isolate;
background-image:
radial-gradient(circle at 18% 28%, #26FFB4 0%, rgba(38, 255, 180, 0) 52%),
radial-gradient(circle at 72% 18%, #4D7CFF 0%, rgba(77, 124, 255, 0) 58%),
radial-gradient(circle at 46% 82%, #B44DFF 0%, rgba(180, 77, 255, 0) 55%),
linear-gradient(200deg, #04070F 0%, #08183A 100%);
background-size: 200% 200%;
background-position: 0% 50%;
background-blend-mode: screen, screen, screen, normal;
animation: pixholm-gradient-pan 14s linear infinite;
}
@keyframes pixholm-gradient-pan {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.pixholm-gradient {
animation: none;
}
}Presets
Beautiful gradients to get you started.
Layers
Each layer paints over the one below. Tap to edit.
100%
100%
100%
100%
Gradient type
Animation
Drifts the gradient diagonally. Loops seamlessly.
Turn Animate off in Presets to hide this card.