New
GradientsMesh Gradient Background
Three blurred radial pools over an opaque base - a mesh section that never has to fight its own text for contrast.
#gradient#mesh#background
6 frameworksBeginner
Loading…
A card wrapped in a slowly rotating conic-gradient border - one paint, then pure transform.
<!--
The ring is the 1px of spinning gradient the p-px padding leaves exposed.
inset-[-100%] makes the conic layer 3x the card so its corners never show
while it rotates, and the spin is pure transform - the gradient is painted
once and rotated by the compositor. Reduced motion stops the spin and leaves
a static conic arc: the motion is the decoration, the ring is the design.
-->
<style>
@keyframes conic-spin {
to { transform: rotate(1turn); }
}
</style>
<div class="relative w-full max-w-sm overflow-hidden rounded-2xl p-px">
<div
class="absolute inset-[-100%] animate-[conic-spin_6s_linear_infinite] bg-[conic-gradient(from_0deg,transparent_0deg,#3b82f6_100deg,#a855f7_180deg,#22d3ee_260deg,transparent_360deg)] motion-reduce:animate-none"
aria-hidden="true"
></div>
<!-- The inner surface must be fully opaque, or the gradient shows through
the card instead of just around it. Radius = outer minus the 1px ring. -->
<div class="relative rounded-[calc(1rem_-_1px)] bg-white p-6 dark:bg-gray-950">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Realtime sync</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Every change lands on every device before you lift your finger off the
key.
</p>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
copy | string | - | Body text shown under the title. |
className | string | - | Additional classes merged onto the root element. |
The ring is the 1px of spinning gradient the `p-px` padding leaves exposed. Three numbers hold it together: `inset-[-100%]` makes the conic layer 3× the card so its corners never show mid-rotation; the inner radius is `calc(1rem - 1px)` - outer minus ring - so the corners don’t pinch; and the inner surface is fully opaque, or the gradient shows through the card instead of around it. The spin is pure `transform: rotate`, so the gradient is painted exactly once and rotated by the compositor; slow it by editing the `6s` in the `animate-[…]` value. `motion-reduce:animate-none` leaves a static conic arc, which still reads as a designed border - the motion is the decoration, the ring is the design. Widen the ring by swapping `p-px` for `p-0.5` and updating the inner `calc()` to match.