• Previous CSS Tip
• Next CSS Tip

Curved avatar header with hover effect

I am using the inner curve/notch shape to create a fancy header with an avatar and a cool hover effect.

• No complex HTML code
• Powered by CSS mask, @property and math functions
• Optimized with CSS variables

See the Pen Fancy avatar header with hover effect by Temani Afif (@t_afif) on CodePen.

Another version with a drop effect

See the Pen Fancy avatar header with hover effect II by Temani Afif (@t_afif) on CodePen.

More CSS Tips

• Remove the unit from any CSS value
• Update CSS variables using range slider
• Progress element with a tooltip
• Inner curve/notch shape using CSS mask
• Quantity queries using has() selector
• A decorative line with rounded dashes