Hero Section Gradient
A diagonal gradient can create a strong visual background for a landing page hero while keeping text and buttons readable.
CSS Background Gradient Generator
Free CSS Background Tool
Create linear and radial CSS background gradients visually. Adjust color stops, opacity and angle, preview the result and copy clean CSS code for sections, buttons, cards and full-page backgrounds.
This CSS Background Gradient Generator is a free visual tool for creating smooth color transitions with pure CSS. You can build linear and radial gradients, control individual color stops, adjust opacity and change the gradient direction.
CSS gradients are scalable, lightweight and do not require image files. They can be used for hero sections, cards, buttons, banners, overlays, full-page backgrounds and decorative UI elements.
A diagonal gradient can create a strong visual background for a landing page hero while keeping text and buttons readable.
Two or more related colors can make a call-to-action button feel more prominent than a flat background color.
Subtle color differences can add depth to cards and panels without making the interface feel overly decorative.
A radial gradient can simulate light spreading from one point and create a spotlight effect behind content.
A semi-transparent gradient placed over an image can improve text readability and create a stronger visual hierarchy.
A CSS gradient is a generated background image made from smooth transitions between two or more colors. It can be used anywhere a CSS background image is supported.
.element {
background: linear-gradient(90deg, #2563eb, #7c3aed);
}
A linear gradient transitions colors along a straight line. The direction can be defined with an angle or a keyword.
.horizontal-gradient {
background: linear-gradient(
90deg,
#2563eb,
#7c3aed
);
}
CSS supports directional keywords such as to right,
to bottom and to bottom right.
.gradient-right {
background: linear-gradient(
to right,
#0ea5e9,
#2563eb
);
}
.gradient-diagonal {
background: linear-gradient(
to bottom right,
#f97316,
#db2777
);
}
Angles provide more precise control over gradient direction. A value of
0deg points upward, while 90deg moves from left
to right.
.angled-gradient {
background: linear-gradient(
135deg,
#06b6d4,
#8b5cf6
);
}
Gradients can contain more than two colors. Each color stop can also have a percentage that controls where it appears.
.multi-color-gradient {
background: linear-gradient(
90deg,
#2563eb 0%,
#7c3aed 50%,
#db2777 100%
);
}
Two colors can share the same stop position to create a sharp transition instead of a smooth blend.
.split-background {
background: linear-gradient(
90deg,
#2563eb 0%,
#2563eb 50%,
#f8fafc 50%,
#f8fafc 100%
);
}
A radial gradient begins at a central point and expands outward in a circular or elliptical shape.
.radial-background {
background: radial-gradient(
circle at center,
#ffffff,
#60a5fa,
#1d4ed8
);
}
The at keyword controls where the radial gradient begins.
.top-left-glow {
background: radial-gradient(
circle at top left,
#fef3c7,
#f97316,
#7c2d12
);
}
Radial gradients can use a circular or elliptical shape. Ellipse is the default and adapts to the aspect ratio of the element.
.circle-gradient {
background: radial-gradient(
circle,
#ffffff,
#2563eb
);
}
.ellipse-gradient {
background: radial-gradient(
ellipse,
#ffffff,
#7c3aed
);
}
RGBA and modern color syntax can create gradients that fade into transparency.
.transparent-gradient {
background: linear-gradient(
180deg,
rgba(15, 23, 42, 0),
rgba(15, 23, 42, .85)
);
}
Multiple backgrounds can place a transparent gradient over an image. The first background layer is drawn above the second one.
.image-overlay {
background:
linear-gradient(
180deg,
rgba(15, 23, 42, .1),
rgba(15, 23, 42, .85)
),
url("image.jpg") center / cover no-repeat;
}
Several gradients can be layered by separating them with commas.
.layered-gradients {
background:
radial-gradient(
circle at top left,
rgba(255, 255, 255, .55),
transparent 45%
),
linear-gradient(
135deg,
#2563eb,
#7c3aed
);
}
Repeating gradients create stripes and geometric background patterns.
.striped-background {
background: repeating-linear-gradient(
45deg,
#2563eb 0,
#2563eb 12px,
#1d4ed8 12px,
#1d4ed8 24px
);
}
A conic gradient rotates colors around a center point. Although this generator currently focuses on linear and radial gradients, conic gradients are useful for color wheels, charts and decorative effects.
.conic-background {
background: conic-gradient(
from 0deg,
#ef4444,
#facc15,
#22c55e,
#3b82f6,
#a855f7,
#ef4444
);
}
.gradient-button {
padding: .9rem 1.5rem;
border: none;
border-radius: .75rem;
background: linear-gradient(
90deg,
#2563eb,
#7c3aed
);
color: #ffffff;
font-weight: 700;
cursor: pointer;
}
.gradient-card {
padding: 2rem;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 1.25rem;
background: linear-gradient(
135deg,
#eff6ff,
#f5f3ff
);
}
A gradient can be animated by increasing its background size and changing the background position.
.animated-gradient {
background: linear-gradient(
90deg,
#2563eb,
#7c3aed,
#db2777,
#2563eb
);
background-size: 300% 100%;
animation: gradient-move 8s linear infinite;
}
@keyframes gradient-move {
from {
background-position: 0 50%;
}
to {
background-position: 100% 50%;
}
}
Text placed over a gradient must remain readable across every color in the background. Test the lightest and darkest sections of the gradient, not only its average appearance.
Static CSS gradients are lightweight and scale without image files. Large animated gradients can increase rendering work, especially when applied to full-screen elements.
A CSS background gradient is a generated image that creates a smooth transition between two or more colors.
Linear gradients move colors along a straight line, while radial gradients expand colors outward from a central point.
Use a directional keyword such as to right or an angle
such as 135deg.
Yes. You can add any number of color stops and assign a position to each one.
Yes. Use RGBA, HSLA or modern color syntax with alpha values to create transparent gradient stops.
Yes. Separate multiple background layers with commas and place the gradient before the image.
Yes. Gradient movement can be simulated by animating background size, background position or CSS custom properties.
Yes. Linear, radial and conic gradients are supported by current major browsers.