I recently saw an interesting multi-colored spinner in the onboarding flow of an iPhone app, so I wanted to try to recreate something like it in CSS.
Controls
How it’s made
This is contructed from four overlapping shapes in red, blue, green, and yellow. Each one is a square with a white background and rounded corners, with a different radius for each corner. Each border also ranges in thickness, creating an irregular shape. Each shape has a subtle drop shadow in the same color as its border, and a filter to blur the shape slightly. There is also some animation that rotates the shape, changes the width of each border over time, and changes its scale and opacity. To make things even more organic, each shape is rotated slightly, and the animations are staggered.
Try modifying the different variables to get different effects. Or try or or or or or or or or or or or or or or or or or or or !