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;
}