Codestin Search App

CSS <gradient> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <gradient> CSS data type represents a smooth transition between two or more colors, which can be applied to backgrounds, borders, or other visual elements to create visually appealing effects. Unlike a simple color value, a <gradient> allows for multiple color stops along a gradient line or shape, enabling complex color transitions. Gradients are considered images in CSS, which means they can be used wherever an background-image is accepted.

There are several types of <gradient>, each designed for specific visual effects. Linear gradients create color transitions along a straight line, while radial gradients radiate colors from a central point outward. Conic gradients rotate colors around a center like a pie chart. Using <gradient> can enhance UI design, for instance in buttons, headers, or canvas elements, providing depth and visual interest without relying on external images.

Gradients can include transparency, using rgba() or hsla() color values, which allows layering effects and blending with other backgrounds. Multiple color stops allow precise control over where one color ends and another begins. For example, you can make smooth transitions between two shades of blue or create a rainbow effect with multiple colors. This makes <gradient> a powerful tool in modern web design for dynamic, responsive, and scalable color effects.

Example: Linear Gradient

button {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

Example: Radial Gradient

div {
  background: radial-gradient(circle, #89f7fe, #66a6ff);
  width: 200px;
  height: 200px;
}

Example: Conic Gradient

section {
  background: conic-gradient(#ff0000, #00ff00, #0000ff, #ff0000);
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

Using <gradient> in CSS allows for rich, high-performance visual effects directly in code, reducing the need for external images and improving both maintainability and performance.

Syntax

<gradient> =
  <linear-gradient()> | <repeating-linear-gradient()> |
  <radial-gradient()> | <repeating-radial-gradient()>

Values

<linear-gradient()>Please go to linear-gradient() function to view values.
<repeating-linear-gradient()>Please go to repeating-linear-gradient() function to view values.
<radial-gradient()>Please go to radial-gradient() function to view values.
<repeating-radial-gradient()>Please go to repeating-radial-gradient() function to view values.

Example

HTML

<div class="container">

  <h1>&lt;gradient&gt; examples</h1>

  <div class="grid">

    <div class="swatch linear">

      <span class="label">linear-gradient(135deg, #ff7e5f → #86a8e7)</span>

    </div>



    <div class="swatch radial">

      <span class="label">radial-gradient(circle at 30% 30%, warm → cool)</span>

    </div>



    <div class="swatch conic">

      <span class="label">conic-gradient(from 220deg at 50% 50%)</span>

    </div>

  </div>

</div>

CSS

/* Layout + type */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 24px;
  background: #f4f6f8;
  color: #0f172a;
}

.container {
  max-width: 980px;
  margin: 0 auto;
}

h1 {
  font-size: 20px;
  margin-bottom: 18px;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Swatch card */
.swatch {
  height: 160px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.label {
  background: rgba(0,0,0,0.32);
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
}

/* Gradient examples using the CSS  data type functions */

/* linear-gradient(angle, color-stop, ...) */
.linear {
  background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 40%, #86a8e7 100%);
}

/* radial-gradient(shape size at position, color-stop, ...) */
.radial {
  background: radial-gradient(circle at 30% 30%, #fddb92 0%, #d1fdff 30%, #a1c4fd 70%, #c2e9fb 100%);
}

/* conic-gradient(from angle at position, color-stop, ...) */
.conic {
  background: conic-gradient(from 220deg at 50% 50%, #f6d365 0%, #fda085 25%, #84fab0 50%, #8fd3f4 75%, #f6d365 100%);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS gradient data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.