Prismatic Magic | Ethereal Edges | Iridescent Code
This design system features animated rainbow prismatic borders that continuously shift through all colors of the magical spectrum. The effect is created using gradient masks and keyframe animations.
Look at the card below to see the prismatic border in action—it cycles through violet, pink, cyan, green, and gold in an endless, mesmerizing flow.
Sharp faerie edges meet liquid light. Magic crystallized in CSS.
This card's border flows through the entire rainbow spectrum continuously. The animation is smooth, CPU-efficient, and requires no JavaScript.
Technical implementation: Uses a pseudo-element with an animated gradient background and mask-composite to create the border effect while maintaining sharp corners.
#c084fc
#f472b6
#67e8f9
#86efac
#fbbf24
#a855f7
#ec4899
#22d3ee
Hover over buttons to see enhanced glow effects. The rainbow button continuously shifts colors.