Category: CSS Tricks

flipping card

Flip Card on Hover

How to make simple card with flipping effect when hovers over it

button with overflowing icon

Button With Overflowing Icon

Make buttons with overflowing icon

infinity loader

Infinity Loader Without SVG

Making loader in the shape of infinity symbol (∞) using clip : rect()

Flapping Dialog Box

Flapping Dialog Box

A dialog box with flapping entrance animation with flapping buttons

soft glow

Soft Glow

Our main tools for creating soft glow are background:inherit and filter:blur()

blurred background

Blurred Background

We will clip the blurred element with the help of overflow:hidden;. This works for both mobile and desktop.

conical gradient

Conical Gradient

We will use CSS filter and backgrounds made with linear gradients

Doubly Beating Icon

We will combine two scale transformation animations (one for the parent element and one for its child) to make the beats