Create

Function

@stripe

Hard-edged color stops for a gradient. Give it the colors and it works out where each stripe starts and ends: @stripe(red, blue) is red 0 50%, blue 0 100%.

Syntax

  • @stripe(<color> [<size>], ...)
color
A color, or anything a gradient accepts as a stop color.
size
An optional width for that stripe, not an offset from the start of the gradient. Stripes without a size share the remaining space equally.

@stripe(gold 60%, orange 30%, crimson) gives crimson the last 10%. @stripes and @strip are aliases.

Background

Before @stripe, striped gradients were written by hand. Each stop needed an explicit start and end, even with @m doing the repeating. Two-position color stops removed the repeated color, but the positions were still computed by hand: 

/* one color, two stops */
@m3((
  @pn(gold, orange, crimson) calc((@n - 1) * 100% / 3),
  @lp calc(@n * 100% / 3)
))

/* two-position color stops */
@m3(
  @pn(gold, orange, crimson) 0 calc(@n * 100% / 3)
)

/* @stripe */
@stripe(gold, orange, crimson)

Examples

@grid: 5 / 60vmin _1px;
background: linear-gradient(
  @r(360deg),
  @stripe(#000, #e6437d, #ebbf4d)
);
Open in playground

Sized stripes:

@grid: 1 / 60vmin;
border-radius: 50%;
background: conic-gradient(
  @stripe(#000 10%, #e6437d 20%, #ebbf4d 30%, #321f35)
);
Open in playground

Many stripes from @m, written with composition. @stripe.@m40.@p(…) is @stripe(@m40(@p(…))): 

@grid: 1 / 60vmin;
background: radial-gradient(
  @stripe.@m40.@p(#000, #e6437d, #ebbf4d)
);
Open in playground

See also