CSS - add shadow on hover

0 points
Created by:

In this article, we would like to show you how to add shadow on hover event using CSS.

Quick solution:

div:hover {
  box-shadow: 10px 5px 10px gray;

The :hover CSS pseudo-class is triggered when the user hovers over an element with the cursor, changing the element style to the one specified within curly brackets.


Practical example

In this example, we add shadow to the div element with the following steps:

  1. in div style, we specify the div style at the beginning and use the transition property to smoothly add shadow to the div over 1 second,
  2. we use div:hover pseudo-class with box-shadow property inside that actually adds a shadow to the div element on the hover event.
// ONLINE-RUNNER:browser;

<!doctype html>

    div {
      height: 100px;
      width: 100px;
      background-color: deepskyblue;
      transition: 1s;

    div:hover {
      box-shadow: 10px 5px 10px gray;



Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā