Gradients in CSS

Gradients in CSS create smooth transitions between colors. They can be used for backgrounds, buttons, cards, overlays, borders, text effects, charts, decorative shapes, and visual depth. A gradient is treated like an image by CSS, so it is commonly used with background or background-image.

Gradients are useful because they do not need external image files. They are resolution-independent, lightweight, and easy to adjust in CSS. The three main types are linear gradients, radial gradients, and conic gradients.

Basic Linear Gradient

A linear gradient blends colors along a straight line. The direction can be controlled with keywords or angles.

.hero {
  background: linear-gradient(135deg, #2563eb, #14b8a6);
}

This creates a diagonal gradient from blue to teal. The angle 135deg controls the direction of the color transition.

Gradient Direction

Linear gradients can use directions such as to right, to bottom, or an angle like 45deg.

.banner {
  background: linear-gradient(to right, #111827, #1d4ed8);
}

Keyword directions are readable. Angles give more precise control for brand backgrounds, hero sections, and decorative panels.

Color Stops

Color stops define where each color appears in the gradient. Without explicit stops, the browser distributes colors evenly.

.card {
  background: linear-gradient(
    135deg,
    #f97316 0%,
    #facc15 45%,
    #22c55e 100%
  );
}

The percentage values control where each color is placed. This gives more control than simply listing colors.

Hard Stops

Gradients can create sharp transitions by placing two colors at the same stop position.

.split {
  background: linear-gradient(
    to right,
    #2563eb 0 50%,
    #f9fafb 50% 100%
  );
}

This creates a hard split instead of a smooth blend. Hard stops are useful for stripes, split backgrounds, and decorative blocks.

Radial Gradients

A radial gradient radiates outward from a center point. It can create glows, spotlights, soft backgrounds, and circular effects.

.glow {
  background: radial-gradient(circle at top left, #93c5fd, transparent 55%);
}

The gradient starts near the top-left and fades outward. Radial gradients are often layered over solid backgrounds.

Conic Gradients

A conic gradient rotates colors around a center point. It is useful for charts, color wheels, rings, and decorative badges.

.donut {
  background: conic-gradient(#2563eb 0 40%, #e5e7eb 40% 100%);
  border-radius: 50%;
}

This can create a simple progress-like circle. For real data charts, make sure the information is also available as text.

Repeating Gradients

Repeating gradients repeat the color pattern automatically. They can create stripes, grids, scan lines, and subtle texture.

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #f3f4f6 0 10px,
    #e5e7eb 10px 20px
  );
}

This creates diagonal stripes without an image file. Keep repeating patterns subtle so they do not harm readability.

Layered Gradients

CSS backgrounds can have multiple layers. This makes gradients powerful for overlays and atmospheric backgrounds.

.section {
  background:
    radial-gradient(circle at top, rgb(37 99 235 / 0.25), transparent 35%),
    linear-gradient(135deg, #0f172a, #111827);
}

The first background layer sits on top of the second. This creates depth without extra elements.

Gradient Over Images

Gradients are often used as overlays on images to improve text contrast.

.hero {
  background:
    linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.25)),
    url("hero.jpg") center / cover;
}

The gradient darkens the image so text is easier to read. This is better than placing text directly over a busy image.

Text Gradients

Text gradients use a background gradient clipped to the text.

.gradient-title {
  background: linear-gradient(90deg, #2563eb, #ec4899);
  -webkit-background-clip: text;
  color: transparent;
}

Use text gradients sparingly. They work best for headings, not long paragraphs.

Gradient Borders

Gradient borders can be created with wrapper elements, background layering, or border-image.

.gradient-border {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #2563eb, #ec4899) border-box;
}

This keeps the inside white while the border area receives the gradient.

Accessibility and Contrast

Gradients can reduce readability if text sits on changing colors. Always test contrast across the whole gradient, not only one point.

If text contrast is unreliable, add an overlay, darken the gradient, simplify the colors, or place text inside a solid card.

Gradient Background Patterns

Gradients can create subtle patterns without image files. A small radial gradient can become a dot pattern, while a repeating linear gradient can become ruled lines or texture.

.dot-bg {
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 18px 18px;
}

This creates a lightweight dotted background. Keep pattern contrast low behind text so the content remains easy to read.

Gradient Buttons

Gradient buttons can look strong when the colors are controlled and the hover state is subtle. The hover state should not create a jarring color jump.

.button {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  transition: filter 160ms ease, transform 160ms ease;
}

.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

This keeps the same gradient but slightly brightens it on hover. The motion stays small and the color relationship remains consistent.

Gradient Mesh Effects

Layered radial gradients can create a soft mesh-style background. This is common in modern landing pages and hero sections.

.mesh {
  background:
    radial-gradient(circle at 20% 20%, rgb(37 99 235 / 0.35), transparent 30%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.28), transparent 28%),
    radial-gradient(circle at 50% 90%, rgb(20 184 166 / 0.25), transparent 32%),
    #0f172a;
}

The base color keeps the background grounded while the radial gradients add atmosphere. Use this kind of effect behind large sections, not dense reading content.

Color Interpolation

Modern CSS supports more advanced color spaces in gradients, such as OKLCH in browsers that support it. These color spaces can produce smoother, more natural color transitions than older RGB interpolation.

.smooth {
  background: linear-gradient(90deg in oklch, #2563eb, #ec4899);
}

Support and team familiarity matter. For broad compatibility and simple projects, normal gradients are still fine. For highly polished design systems, modern color spaces can improve gradient quality.

Debugging Gradients

If a gradient does not appear, remember that it is a background image. Check whether another background layer overrides it, whether the element has size, and whether text or child backgrounds are covering it.

• Check background layer order.
• Check element width and height.
• Check whether a solid background overrides the gradient.
• Check text contrast across every color stop.
• Check repeating gradients at multiple screen densities.
• Check browser support for newer color syntax.

Gradients with Background Size

Changing background-size can make a gradient behave like a larger design surface. This is useful for animated gradient backgrounds and hover effects.

.animated-gradient {
  background: linear-gradient(90deg, #2563eb, #ec4899, #14b8a6);
  background-size: 200% 100%;
  transition: background-position 300ms ease;
}

.animated-gradient:hover {
  background-position: 100% 0;
}

The gradient is wider than the element, so moving the background position reveals a different part of the color blend. Keep this kind of effect subtle for buttons and cards.

Gradient Masks

Gradients can also be used as masks. A mask controls which parts of an element are visible. This can create fade-out edges on overflowing content or image effects.

.fade-edge {
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

The black part of the mask stays visible, while transparent parts fade out. Browser support and prefixes should be checked when using masks in production.

Gradient Borders with Pseudo Elements

Another way to create a gradient border is to place a pseudo element behind the component. This gives more control for rounded cards and animated borders.

.fancy-card {
  position: relative;
  isolation: isolate;
}

.fancy-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #2563eb, #ec4899);
  z-index: -1;
}

The pseudo element becomes the gradient border layer. The actual card can keep its own solid background on top.

Gradients and Brand Systems

If a website uses gradients often, define a small set of approved gradient tokens. Random gradients across every page make the design feel inconsistent. A few reusable gradients are easier to maintain and easier to recognize as part of the brand.

:root {
  --gradient-primary: linear-gradient(135deg, #2563eb, #7c3aed);
  --gradient-warm: linear-gradient(135deg, #f97316, #ec4899);
}

Named gradients also make future redesigns simpler because colors can be adjusted in one place.

Gradients as Subtle Depth

Gradients do not always need bright colors. A subtle gradient between two near-neutral colors can make a card or section feel less flat while staying professional.

.soft-panel {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

This type of gradient is useful for clean interfaces because it adds depth without turning the design into decoration. It works well on cards, documentation blocks, forms, and pricing panels.

Gradient Fallbacks

When using complex gradients or newer color syntax, include a sensible fallback color. If the gradient fails or is not supported, the element should still look usable.

.hero {
  background-color: #111827;
  background-image: linear-gradient(135deg, #111827, #2563eb);
}

The solid color provides a reliable base. The gradient enhances the design when supported.

Gradient Checklist

• Use linear gradients for directional color movement.
• Use radial gradients for glows and spotlights.
• Use conic gradients for circular progress or charts.
• Use overlays to improve text contrast on images.
• Keep repeated patterns subtle behind content.
• Create reusable gradient tokens for brand consistency.

A good gradient should support the layout hierarchy. Use strong gradients for hero areas or calls to action, and softer gradients for backgrounds that sit behind real content.

When readability is involved, choose clarity over color drama.

Test contrast.

Common Gradient Mistakes

• Using low contrast text over busy gradients.
• Adding too many colors without a clear design purpose.
• Using strong repeating patterns behind readable content.
• Forgetting gradients are background images.
• Overusing text gradients on long content.
• Not testing gradients on different screen brightness levels.

Gradients in CSS FAQ

What is a gradient in CSS?

A CSS gradient is an image-like value that smoothly transitions between colors.

What are the main gradient types?

The main types are linear-gradient, radial-gradient, conic-gradient, and repeating gradients.

Can gradients be layered?

Yes. Multiple background layers can combine gradients, images, and solid colors.

Can text have a gradient?

Yes. Use background-clip: text and transparent text color for gradient text effects.

---