Title: Slider shadow
Last modified: August 31, 2016

---

# Slider shadow

 *  Resolved [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/slider-shadow-2/)
 * Hi,
 * Your demo slider is amazing!
    I try adding a shadow effect similar like your 
   demo slider. I find a code-snippet on Codepen: [http://codepen.io/haibnu/pen/FxGsI](http://codepen.io/haibnu/pen/FxGsI)(
   effect 2) But doesn’t work. I try it with this classes: .crellyslider-slider-
   front (that’s my sliders’ shortcode name) .crellyslider-slider
 * Can you explain witch (css) you used in your slider?
 * Regards,
    Christophe
 * [https://wordpress.org/plugins/crelly-slider/](https://wordpress.org/plugins/crelly-slider/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
 * (@fabiorino)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/slider-shadow-2/#post-7053576)
 * Try to copy and paste this code:
 * .crellyslider-slider {
    margin-bottom: 30px; position: relative; background-color:#
   ddd; }
 * .crellyslider-slider:before,
    .crellyslider-slider:after { z-index: -1; position:
   absolute; content: “”; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:
   300px; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0,
   0.4); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4); box-shadow: 0 15px 10px
   rgba(0, 0, 0, 0.4); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-
   3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: 
   rotate(-3deg); }
 * .crellyslider-slider:after {
    -webkit-transform: rotate(3deg); -moz-transform:
   rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform:
   rotate(3deg); right: 10px; left: auto; }
 *  Thread Starter [ctuxboy](https://wordpress.org/support/users/ctuxboy/)
 * (@ctuxboy)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/slider-shadow-2/#post-7053812)
 * Hi,
 * Sorry for the very late feedback.
 * This works.
 * Thanks a lot!!!
 * Regards,
    Christophe
 *  [gaszer](https://wordpress.org/support/users/gaszer/)
 * (@gaszer)
 * [10 years ago](https://wordpress.org/support/topic/slider-shadow-2/#post-7053818)
 * Great slider! Love the element transitions and animation!
 * I just tried the above CSS to add a shadow below the slider, and it works great.
   My question is, that I see the box shadows between slide transitions, and it 
   doesn’t look great. Is there a solution to that?
 * Just that the shadows add a bit more dpeth to the slider.
 * thanks!
 *  Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
 * (@fabiorino)
 * [10 years ago](https://wordpress.org/support/topic/slider-shadow-2/#post-7053820)
 * Try to add this:
    .crellyslider-slider { background-color: #fff; }
 *  [gaszer](https://wordpress.org/support/users/gaszer/)
 * (@gaszer)
 * [10 years ago](https://wordpress.org/support/topic/slider-shadow-2/#post-7053822)
 * Thanks! Worked like a charm!
 * I had actually tried that before you responded, but had forgotten the # tag before
   the color. ;0p
 * Thanks again!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Slider shadow’ is closed to new replies.

 * ![](https://ps.w.org/crelly-slider/assets/icon-128x128.jpg?rev=1305586)
 * [Crelly Slider](https://wordpress.org/plugins/crelly-slider/)
 * [Support Threads](https://wordpress.org/support/plugin/crelly-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/crelly-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/crelly-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/crelly-slider/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [gaszer](https://wordpress.org/support/users/gaszer/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/slider-shadow-2/#post-7053822)
 * Status: resolved