From our partner: The AI visual builder for Next.js & Tailwind: Generate UI with AI. Customize it with a visual editor. Export Next.js, Tailwind & shadcn/ui code.
Rounded shapes are back in fashion! Specifically, pill shaped forms are really hot right now, as can be seen on Icelandic Explorer for example:
On Gucci Beauty you can see many rounded shapes, especially rounded cards:
Window-like shapes are also super trendy, as can be seen in this beautiful poster design by Ana Sakac:
Another example is this great design by mashiqo:
I recently also stumbled across this beautiful Dribbble shot by Tyshchuk Maryna:
I thought that this might be somehow possible to do with a clip-path animation, so I started experimenting. It turns out that by using any kind of <basic-shape> you can create a unique look for a slideshow transition, or any other kind of transition, like a hover for example:
As a result, I have created four demos showing some ideas that might spark your inspiration. I really hope you like them!
Here is that pill-shaped look I was after:
Note that for non-supporting browsers, we’ll simply see the slide move without a clip-path applied to it.
Thank you for checking by and hope you enjoy this!
