Do you know how box-shadow is sometimes used as a hover effect? It adds depth to something, like a button, and can create the impression that it is being pressed into the page.

Let’s pull it all together:

See the Pen Gradient Hover [forked] by Preethi Sam.

Have fun with this! Try different colors and different gradations. Here’s another example where the gradient is applied to text elements:

See the Pen Gradient Hover 2 [forked] by Preethi Sam.

Aesthetics aside, remember to use designs, layouts, and colors that make it clear to users that they are interacting with the element and what that interaction does.

Further Reading On SmashingMag

• “Inspired Design Decisions With Neville Brody: Design Cannot Remain Neutral,” Andrew Clarke
• “A Deep CSS Dive Into Radial And Conic Gradients,” Ahmad Shadeed
• “Create Responsive Image Effects With CSS Gradients And aspect-ratio,” Stephanie Eckles
• “A Guide To Hover And Pointer Media Queries,” Cristian Díaz