Gerillass: Gradient Sass Mixin

Gradient

Type: Mixin

@include gradient();

* You can call mixins with or without the gls- namespace (e.g. @include gls-gradient();).

The Gradient Sass mixin writes a linear, radial or conic gradient as background-image. The colours come first, so a plain two-colour gradient is one short call, and everything else has a default: the type is linear unless you say otherwise.

It writes background-image rather than the background shorthand, which resets a background-color set before it.

$in sets the colour space the gradient blends in. Blue to yellow goes grey in the middle in the browser's default sRGB, and stays clear in oklab. The mixin writes the gradient once without the space first, so a browser that does not know in still draws one.

New in Gerillass 3.0.0: gradient replaces the linear-gradient and radial-gradient mixins, which are gone. Every call to them has a gradient call that writes the same gradient; the examples below include all of theirs. See MIGRATION.md for the change call by call.

Arguments

Name	Type	Description
`$colors`	list	The colour stops. A stop is a colour followed by up to two positions, and a position on its own between two colours is a hint. In a conic gradient the positions are angles or percentages. A single colour warns, since browsers before Chrome 135, Firefox 136 and Safari 18.4 drop it.
`$type`	string	`linear`, the default, `radial` or `conic`.
`$direction`	string, number	Linear only. A name such as `top` or `bottom-left`, an angle in any unit such as `0.25turn`, `"to left top"`, or `var()`.
`$shape`	string	Radial only. `circle` or `ellipse`, with an optional size such as `"circle 10px"`.
`$position`	string	Radial or conic. A name such as `center` or `top-left`, or `"at 30% 40%"`.
`$from`	number	Conic only. The angle the gradient starts at.
`$in`	string	A colour space such as `oklab`, or a polar one with a hue method such as `"oklch longer hue"`.
`$repeating`	boolean	`true` for a repeating gradient.

Examples

Linear gradients

Everything the removed linear-gradient mixin did, with the colours first and the direction named.

Pass the colours and a direction. With no direction the gradient runs top to bottom, the CSS default.

Sass

.element{
  @include gradient(#43c6ac #191654, $direction: right);
}

CSS

.element {
  background-image: linear-gradient(to right, #43c6ac, #191654);
}

Result

Add as many colours as you like.

Sass

.element{
  @include gradient(#43c6ac #191654 #963d91, $direction: right);
}

CSS

.element {
  background-image: linear-gradient(to right, #43c6ac, #191654, #963d91);
}

Result

Colour stop positions set where each colour starts and ends, so the transitions only happen in the gaps.

Sass

.element{
  @include gradient(
    (#1a2a6c 0 10%) (#b21f1f 30% 60%) (#fdbb2d 90% 100%),
    $direction: right
  );
}

CSS

.element {
  background-image: linear-gradient(to right, #1a2a6c 0 10%, #b21f1f 30% 60%, #fdbb2d 90% 100%);
}

Result

Make the stops meet and the transitions become hard edges.

Sass

.element{
  @include gradient(
    (#1a2a6c 25%) (#b21f1f 25% 50%) (#fdbb2d 50% 75%) (orange 75% 100%),
    $direction: right
  );
}

CSS

.element {
  background-image: linear-gradient(to right, #1a2a6c 25%, #b21f1f 25% 50%, #fdbb2d 50% 75%, orange 75% 100%);
}

Result

An angle works in any unit: deg, turn, rad or grad.

Sass

.element{
  @include gradient(#f857a6 #5b86e5, $direction: 0.125turn);
}

CSS

.element {
  background-image: linear-gradient(0.125turn, #f857a6, #5b86e5);
}

Result

Radial gradients

Everything the removed radial-gradient mixin did. Pass radial as the type, then a shape and a position if you want them.

A circle from the centre.

Sass

.element{
  @include gradient(red orange, radial, $shape: circle, $position: center);
}

CSS

.element {
  background-image: radial-gradient(circle at center, red, orange);
}

Result

An ellipse, which follows the shape of the box.

Sass

.element{
  @include gradient(red orange, radial, $shape: ellipse, $position: center);
}

CSS

.element {
  background-image: radial-gradient(ellipse at center, red, orange);
}

Result

Move the centre to a corner.

Sass

.element{
  @include gradient(red orange gold, radial, $shape: circle, $position: top-right);
}

CSS

.element {
  background-image: radial-gradient(circle at top right, red, orange, gold);
}

Result

Hard stops turn a radial gradient into rings.

Sass

.element{
  @include gradient(
    (darkslateblue 0 10%) (white 10% 20%) (dodgerblue 20% 30%) (powderblue 30% 100%),
    radial,
    $shape: circle,
    $position: center
  );
}

CSS

.element {
  background-image: radial-gradient(circle at center, darkslateblue 0 10%, white 10% 20%, dodgerblue 20% 30%, powderblue 30% 100%);
}

Result

With named arguments the call reads like a sentence.

Sass

.element{
  @include gradient(
    $colors: pink crimson,
    $type: radial,
    $shape: circle,
    $position: top
  );
}

CSS

.element {
  background-image: radial-gradient(circle at top, pink, crimson);
}

Result

Conic gradients

A conic gradient sweeps its colours round a centre, like the hand of a clock. Its stops are angles or percentages of a full turn.

A pie chart is three stops and no image.

Sass

.chart{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  @include gradient(
    (#43c6ac 0 45%) (#191654 45% 80%) (#fdbb2d 80% 100%),
    conic
  );
}

CSS

.chart {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-image: conic-gradient(#43c6ac 0 45%, #191654 45% 80%, #fdbb2d 80% 100%);
}

Result

A progress ring: the filled part is one stop, the track is the other, and a circle in the middle holds the number.

Sass

.ring{
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  @include gradient((#6366f1 0 72%) (#e0e7ff 72% 100%), conic);

  &::before{
    content: "72%";
    display: grid;
    place-items: center;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: #fff;
    font: 600 28px/1 system-ui, sans-serif;
    color: #312e81;
  }
}

CSS

.ring {
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-image: conic-gradient(#6366f1 0 72%, #e0e7ff 72% 100%);
}
.ring::before {
  content: "72%";
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: #fff;
  font: 600 28px/1 system-ui, sans-serif;
  color: #312e81;
}

Result

A colour wheel for a picker. Blending red to red the long way round the hue circle passes through every hue.

Sass

.wheel{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  @include gradient(red red, conic, $in: hsl longer hue);
}

CSS

.wheel {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-image: conic-gradient(red, red);
  background-image: conic-gradient(in hsl longer hue, red, red);
}

Result

A sunburst behind a sale banner. The rays repeat every 20 degrees from a centre below the bottom edge, set with $position, and start at an angle set with $from.

Sass

.element{
  @include gradient(
    (#fde68a 0 10deg) (#f59e0b 10deg 20deg),
    conic,
    $from: -5deg,
    $position: "at 50% 120%",
    $repeating: true
  );
}

CSS

.element {
  background-image: repeating-conic-gradient(from -5deg at 50% 120%, #fde68a 0 10deg, #f59e0b 10deg 20deg);
}

Result

Repeating gradients

Set $repeating: true and the stops repeat until they fill the box, which is how patterns are made without a single image file.

Hazard tape, for a warning banner or a maintenance notice.

Sass

.tape{
  display: grid;
  place-items: center;
  height: 64px;
  font: 700 18px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: #111;
  @include gradient(
    (#facc15 0 20px) (#111 20px 40px),
    $direction: 45deg,
    $repeating: true
  );

  span{
    padding: 6px 14px;
    background: #facc15;
  }
}

CSS

.tape {
  display: grid;
  place-items: center;
  height: 64px;
  font: 700 18px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: #111;
  background-image: repeating-linear-gradient(45deg, #facc15 0 20px, #111 20px 40px);
}
.tape span {
  padding: 6px 14px;
  background: #facc15;
}

Result

The checkerboard design tools draw behind a transparent image. The pattern is one conic tile, repeated by background-size.

Sass

.transparency{
  height: 200px;
  background-size: 24px 24px;
  @include gradient((#e5e7eb 0 25%) (#fff 25% 50%), conic, $repeating: true);
}

CSS

.transparency {
  height: 200px;
  background-size: 24px 24px;
  background-image: repeating-conic-gradient(#e5e7eb 0 25%, #fff 25% 50%);
}

Result

Ripples, for a map pin or a live indicator.

Sass

.ripples{
  height: 200px;
  @include gradient(
    (#0f766e 0 2px) (#ccfbf1 2px 18px),
    radial,
    $shape: circle,
    $position: center,
    $repeating: true
  );
}

CSS

.ripples {
  height: 200px;
  background-image: repeating-radial-gradient(circle at center, #0f766e 0 2px, #ccfbf1 2px 18px);
}

Result

Ruled lines, like a notebook page.

Sass

.element{
  @include gradient(
    (#fff 0 27px) (#bfdbfe 27px 28px),
    $repeating: true
  );
}

CSS

.element {
  background-image: repeating-linear-gradient(#fff 0 27px, #bfdbfe 27px 28px);
}

Result

In real interfaces

A spotlight hero. An ellipse of colour glows from the top edge of a dark section, the look of many product launch pages.

Sass

.hero{
  display: grid;
  place-items: center;
  height: 260px;
  border-radius: 16px;
  font: 700 32px/1.2 system-ui, sans-serif;
  color: #fff;
  background-color: #0b1020;
  @include gradient(
    (rgba(99, 102, 241, 0.55) 0%) (transparent 70%),
    radial,
    $shape: ellipse 70% 60%,
    $position: "at 50% 0%"
  );
}

CSS

.hero {
  display: grid;
  place-items: center;
  height: 260px;
  border-radius: 16px;
  font: 700 32px/1.2 system-ui, sans-serif;
  color: #fff;
  background-color: #0b1020;
  background-image: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(99, 102, 241, 0.55) 0%, transparent 70%);
}

Result

A call to action button, blended in oklch so the middle stays vivid instead of turning muddy.

Sass

.button{
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font: 600 16px/1 system-ui, sans-serif;
  color: #fff;
  text-decoration: none;
  @include gradient(#ff5f6d #6a82fb, $direction: right, $in: oklch);
}

CSS

.button {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font: 600 16px/1 system-ui, sans-serif;
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(to right, #ff5f6d, #6a82fb);
  background-image: linear-gradient(to right in oklch, #ff5f6d, #6a82fb);
}

Result

A progress bar with a hard edge, so the value reads at a glance.

Sass

.progress{
  height: 14px;
  border-radius: 999px;
  @include gradient((#22c55e 0 64%) (#e5e7eb 64% 100%), $direction: right);
}

CSS

.progress {
  height: 14px;
  border-radius: 999px;
  background-image: linear-gradient(to right, #22c55e 0 64%, #e5e7eb 64% 100%);
}

Result

A card whose top edge catches the light, for a featured plan in a pricing table.

Sass

.card{
  width: 260px;
  padding: 28px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font: 15px/1.5 system-ui, sans-serif;
  color: #374151;
  @include gradient((#eef2ff 0) (#fff 45%));

  strong{
    display: block;
    font-size: 22px;
    color: #111827;
  }
}

CSS

.card {
  width: 260px;
  padding: 28px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font: 15px/1.5 system-ui, sans-serif;
  color: #374151;
  background-image: linear-gradient(#eef2ff 0, #fff 45%);
}
.card strong {
  display: block;
  font-size: 22px;
  color: #111827;
}

Result

More ideas

Shapes and scenes drawn with nothing but a gradient.

A retro sun for a synthwave poster. Hard stops cut it into bands, and a second colour stop in each band leaves a gap of the page behind.

Sass

.sun{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  @include gradient(
    (#fde047 0 42%) (#fb923c 42% 56%) (#fff 56% 59%)
    (#f472b6 59% 70%) (#fff 70% 73%) (#c026d3 73% 84%)
    (#fff 84% 88%) (#7c3aed 88% 100%)
  );
}

CSS

.sun {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: linear-gradient(#fde047 0 42%, #fb923c 42% 56%, #fff 56% 59%, #f472b6 59% 70%, #fff 70% 73%, #c026d3 73% 84%, #fff 84% 88%, #7c3aed 88% 100%);
}

Result

A gauge for a dashboard. The conic gradient starts at -90deg, fills the top half up to the value, and leaves the bottom half the colour of the page.

Sass

.gauge{
  width: 220px;
  height: 220px;
  border-radius: 50%;
  @include gradient(
    (#22c55e 0 32%) (#e5e7eb 32% 50%) (#fff 50% 100%),
    conic,
    $from: -90deg
  );
}

CSS

.gauge {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-image: conic-gradient(from -90deg, #22c55e 0 32%, #e5e7eb 32% 50%, #fff 50% 100%);
}

Result

A radar screen. The sweep is a conic gradient that stays dark for most of the turn and brightens towards its leading edge.

Sass

.radar{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  @include gradient((#052e16 0 70%) (#16a34a 97%) (#86efac 100%), conic, $from: 20deg);
}

CSS

.radar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: conic-gradient(from 20deg, #052e16 0 70%, #16a34a 97%, #86efac 100%);
}

Result

A stage light. A narrow wedge of a conic gradient, placed above the top edge with $position, falls on the stage as a beam.

Sass

.element{
  @include gradient(
    (#1e1b4b 0 165deg) (#fef3c7 172deg 188deg) (#1e1b4b 195deg 360deg),
    conic,
    $position: "at 50% -10%"
  );
}

CSS

.element {
  background-image: conic-gradient(at 50% -10%, #1e1b4b 0 165deg, #fef3c7 172deg 188deg, #1e1b4b 195deg 360deg);
}

Result

Contour lines for a map or a hiking app, from rings repeated round a peak that sits off centre.

Sass

.element{
  @include gradient(
    (#ecfccb 0 14px) (#65a30d 14px 15px) (#ecfccb 15px 28px),
    radial,
    $shape: circle,
    $position: "at 30% 40%",
    $repeating: true
  );
}

CSS

.element {
  background-image: repeating-radial-gradient(circle at 30% 40%, #ecfccb 0 14px, #65a30d 14px 15px, #ecfccb 15px 28px);
}

Result

A rainbow flag in six hard stops, for a banner or an avatar ring.

Sass

.element{
  @include gradient(
    (#e40303 0 16.66%) (#ff8c00 16.66% 33.33%) (#ffed00 33.33% 50%)
    (#008026 50% 66.66%) (#24408e 66.66% 83.33%) (#732982 83.33% 100%)
  );
}

CSS

.element {
  background-image: linear-gradient(#e40303 0 16.66%, #ff8c00 16.66% 33.33%, #ffed00 33.33% 50%, #008026 50% 66.66%, #24408e 66.66% 83.33%, #732982 83.33% 100%);
}

Result

Colour spaces

Blue to yellow blended in the browser's default sRGB. The middle turns grey.

Sass

.element{
  @include gradient(blue yellow, $direction: right);
}

CSS

.element {
  background-image: linear-gradient(to right, blue, yellow);
}

Result

The same two colours in oklab. The blend stays clear all the way. A browser that does not support colour spaces gets the sRGB version instead.

Sass

.element{
  @include gradient(blue yellow, $direction: right, $in: oklab);
}

CSS

.element {
  background-image: linear-gradient(to right, blue, yellow);
  background-image: linear-gradient(to right in oklab, blue, yellow);
}

Result

To layer a gradient over a photo, or use one as a mask-image or border-image, use the gradientValue function. It takes the same arguments and returns the gradient as a value.

What it refuses

An argument that does not belong to the gradient's type stops the build, because the browser would ignore it and nothing would say so.

Sass

.element {
  @include gradient(red blue, $from: 45deg);
}

Error: $from is for a conic gradient, and this one is linear.

A colour stop the browser drops stops the build too, since the whole gradient goes with it. A conic gradient's stops are angles or percentages, so a length is refused there.

Sass

.element {
  @include gradient((red 10px) blue, conic);
}

Error: `(red 10px) blue` is not a valid $colors for `gradient`: in `red 10px`, `10px` is not an angle or a percentage, and a conic stop is placed by one. A browser drops the whole gradient.

Gradient

Arguments

Examples

Linear gradients

Radial gradients

Conic gradients

Repeating gradients

In real interfaces

More ideas

Colour spaces

What it refuses

Related Links