Gradient Shapes

Shapes generated with CSS background gradients.

div {
background:
  linear-gradient(currentColor, currentColor)
  50% / 50% 50%
  no-repeat;
}
div {
background:
  linear-gradient(
    110deg,
    transparent 30%, currentColor 30%,
    currentColor 70%, transparent 70%
  )
  50% / 90% 40%
  no-repeat;
}
div {
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 75%
  no-repeat;
}
div {
background:
  radial-gradient(
    circle at 50% 0%,
    currentColor 40%, transparent 40%
  )
  50% 100% / 60% 60%
  no-repeat;
}
div {
background:
  radial-gradient(currentColor 50%, transparent 50%)
  50% / 75% 45%
  no-repeat;
}
div {
background:
  radial-gradient(
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
}
div {
background:
  linear-gradient(90deg, currentColor, currentColor)
  50% / 2px 75%
  no-repeat;
}
div {
background:
  linear-gradient(
    -60deg,
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  )
  50% / 75% 75%
  no-repeat;
}
div {
background:
  linear-gradient(
    -135deg, currentColor 50%, transparent 50%
  )
  50% / 50% 50%
  no-repeat;
}
Your browser doesn't support conic-gradient yet.
div {
background:
  conic-gradient(
    from 145deg,
    currentColor 0, currentColor 20%, transparent 20%
  )
  50% -50% / 80% 80%
  no-repeat;
}
Your browser doesn't support conic-gradient yet.
div {
background:
  conic-gradient(
    from 165deg at 50% -86%,
    currentColor 0, currentColor 8%, transparent 8%
  )
  50% / 50% 50%
  no-repeat;
}
Your browser doesn't support conic-gradient yet.
div {
background:
  conic-gradient(
    from -45deg,
    currentColor 25%, currentColor 50%,
    transparent 50%, transparent 75%,
    currentColor 75%
  )
  50% 120% / 30% 80%
  no-repeat;
}
Your browser doesn't support conic-gradient yet.
div {
background:
  conic-gradient(
    from 90deg at 0 0,
    transparent 25deg, currentColor 25deg,
    currentColor 65deg, transparent 65deg
  )
  50% / 50% 50%
  no-repeat;
}
Your browser doesn't support conic-gradient yet.
div {
background:
  conic-gradient(
    from 90deg,
    transparent 12.5%, currentColor 12.5%,
    currentColor 37.5%, transparent 37.5%,
    transparent 62.5%, currentColor 62.5%,
    currentColor 87.5%, transparent 87.5%
  )
  50% / 32% 50%
  no-repeat;
}
Your browser doesn't support conic-gradient yet.
div {
background:
  conic-gradient(
    transparent 60deg, currentColor 60deg,
    currentColor 120deg, transparent 120deg,
    transparent 240deg, currentColor 240deg,
    currentColor 300deg, transparent 300deg
  )
  50% / 50% 50%
  no-repeat;
}
div {
background:
  repeating-linear-gradient(
    transparent -1%, transparent 14%,
    currentColor 14%, currentColor 28%
  )
  50% / 50% 60%
  no-repeat;
}