Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gradient shadow in pure CSS

Gradient shadow in pure CSS

alt text

HTML
<button>Let's Go !</button>

CSS

Declare colors

html, :root {
  --purple: #7f00ff;
  --pink: #e100ff;
}

Styling our button

button {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  position: relative;
  outline: none;
  border: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.75em 1.75em;
  border-radius: 50px;
  display: inline-block;
  color: #fff;
  
  /* Our gradient */
  background: -webkit-gradient(linear, left top, right top, from(var(--purple)), to(var(--pink)));
  background: linear-gradient(to right, var(--purple), var(--pink));
}

Now, let's create our shadow

button::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -10px;
  left: 5%;
  height: 110%;
  width: 90%;
  opacity: 0.8;
  border-radius: 50px;
  
  /* Declaring our shadow color inherit from the parent (button) */
  background: inherit;
  
  /* Blurring the element for shadow effect */
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
  -ms-filter: blur(6px);
  filter: blur(6px);
  
  /* Transition for the magic */
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

We have our button and her shadow, now change the style for hover

button:hover::after {
  /* Changing blur effect */
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);

  /* And change the style properties */
  width: 100%;
  bottom: -5px;
  left: 0;
}

For more interactivity, change the active effect

button:hover:active::after {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

Easy no ?

For some bug and impovements on IE and Edge

/* Edge does not support blur effect, so we can just delete the ::after element and replace it by a box-shadow */

@supports (-ms-ime-align: auto) {
  button {
    -webkit-box-shadow: 0 20px 20px -15px rgba(127, 0, 255, .8);
    box-shadow: 0 20px 20px -15px rgba(127, 0, 255, .8);
}
  button::after, button:hover::after, button:active::after {
    display: none;
  }
}


/* And IE does not support CSS variables and blur effect, so we had to make the same and recreate the background-gradient */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Fix css var by calling the hexa colors */
  button {
    background: -webkit-gradient(linear, left top, right top, from(#7f00ff), to(#e100ff));
    background: linear-gradient(to right, #7f00ff, #e100ff);
    -webkit-box-shadow: 0 20px 20px -15px rgba(127, 0, 255, .8);
    box-shadow: 0 20px 20px -15px rgba(127, 0, 255, .8);
    border-collapse: separate;
  }
  /* Deleting the shadow */
  button::after, button:hover::after, button:active::after {
    display: none;
  }
}

A live version is here

@deansimcox

This comment has been minimized.

Copy link

deansimcox commented Mar 27, 2018

Very nice!
I think you could use background: inherit; on the ::after psuedo element, that way you're not repeating the gradient declaration.

@Noctsyndrome

This comment has been minimized.

Copy link

Noctsyndrome commented Mar 27, 2018

Great work!

@tunguskha

This comment has been minimized.

Copy link
Owner Author

tunguskha commented Mar 27, 2018

@Noctsyndrome, @deansimcox, Thank you ! I've edited the background for inherit, it's better, good job ! :)

@Mohsen-Khakbiz

This comment has been minimized.

Copy link

Mohsen-Khakbiz commented Mar 27, 2018

looking good. I've done this a while ago. altho your code looking much better :D https://codepen.io/Mohsen-Khakbiz/pen/RaqaOG

@tunguskha

This comment has been minimized.

Copy link
Owner Author

tunguskha commented Mar 27, 2018

@Mohsen-Khabiz, your code is really good too ! You just need to change :before to ::before for better compatibility :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.