Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS3 Box Shadow, only top/right/bottom/left and all
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style>
.box {
height: 150px;
width: 300px;
margin: 20px;
border: 1px solid #ccc;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: 5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: -5px 0 5px -5px #333;
}
.all {
box-shadow: 0 0 5px #333;
}
</style>
</head>
<body>
<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>
<div class="box all"></div>
</body>
</html>
@roier

This comment has been minimized.

Copy link

commented Jul 25, 2012

c': beautiful

@AdrianAntunez

This comment has been minimized.

Copy link

commented Oct 18, 2012

It's clear now, thanks mate!! :D

@oliviercardoen

This comment has been minimized.

Copy link

commented May 9, 2013

Thanks a lot !

@strelok1

This comment has been minimized.

Copy link

commented Jul 19, 2013

Pretty sure you have .right and .left mixed up

@git-ashish

This comment has been minimized.

Copy link

commented Sep 11, 2013

nice! agree with strelok1

@johnstonian

This comment has been minimized.

Copy link

commented Sep 18, 2013

thanks much!

@fizerkhan

This comment has been minimized.

Copy link

commented Dec 31, 2013

Thank you very much.

@antoniosarco

This comment has been minimized.

Copy link

commented Feb 5, 2014

More experiment with css box shadow

http://www.corelangs.com/css/box/shadow.html

css tutorial

@franciscocorrales

This comment has been minimized.

Copy link

commented Aug 12, 2014

could you add an image ? of this working. ? Thank you.

@Dansziel

This comment has been minimized.

Copy link

commented Aug 18, 2014

Amazing *:P

@mikewasmike

This comment has been minimized.

Copy link

commented Dec 4, 2014

Just what I was looking for, thanks.

@VeritoLeon

This comment has been minimized.

Copy link

commented Feb 24, 2015

Thank you!

@vc1492a

This comment has been minimized.

Copy link

commented Mar 8, 2015

Worked for me! Thanks!

@j0ssGZ

This comment has been minimized.

Copy link

commented May 12, 2015

Perfect! Thanks a lot =)

@Korveld

This comment has been minimized.

Copy link

commented Jun 8, 2015

Awesome! Thanks)

@sylwiaeb

This comment has been minimized.

Copy link

commented Sep 18, 2015

👍

@seanvandenberg

This comment has been minimized.

Copy link

commented Dec 30, 2015

Brilliant, sir!

@roma-sem

This comment has been minimized.

Copy link

commented Feb 10, 2016

Thank you very much! Very neat solution!!!

@jorobogdanov

This comment has been minimized.

Copy link

commented Mar 3, 2016

Really helpful !!!

@zeckdude

This comment has been minimized.

Copy link

commented Apr 19, 2016

Very cool! Thanks for sharing! I created a Codepen for the rules and added a few others as well: http://codepen.io/zeckdude/pen/oxywmm

@sksar

This comment has been minimized.

Copy link

commented Jul 22, 2016

A little light shadows..

/* Shadows */
.shadow-top {
    box-shadow: 0 -10px 20px -5px rgba(115,115,115,0.75);
}
.shadow-right {
    box-shadow: 10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-bottom {
    box-shadow: 0 10px 20px -5px rgba(115,115,115,0.75);
}
.shadow-left {
    box-shadow: -10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-all {
    box-shadow: 0 0 20px rgba(115,115,115,0.75);
}
.shadow-top-right{
    box-shadow: 0 -10px 20px -5px rgba(115,115,115,0.75),
                10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-top-bottom{
    box-shadow: 0 -10px 20px -5px rgba(115,115,115,0.75),
                0 10px 20px -5px rgba(115,115,115,0.75);
}
.shadow-top-left{
    box-shadow: 0 -10px 20px -5px rgba(115,115,115,0.75),
                -10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-bottom-right{
    box-shadow: 0 10px 20px -5px rgba(115,115,115,0.75),
                10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-left-right{
    box-shadow: -10px 0 20px -5px rgba(115,115,115,0.75),
                10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-bottom-left{
    box-shadow: 0 10px 20px -5px rgba(115,115,115,0.75),
                -10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-top-bottom-right{
    box-shadow: 0 -10px 20px -5px rgba(115,115,115,0.75),
                0 10px 20px -5px rgba(115,115,115,0.75),
                10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-top-bottom-left{
    box-shadow: 0 -10px 20px -5px rgba(115,115,115,0.75),
                0 10px 20px -5px rgba(115,115,115,0.75),
                -10px 0 20px -5px rgba(115,115,115,0.75);
}
.shadow-inset {
    box-shadow: inset 0 0 20px rgba(115,115,115,0.75);
}
@farskid

This comment has been minimized.

Copy link

commented Jul 25, 2016

This was always a challenge for me. Thanks

@inferno7291

This comment has been minimized.

Copy link

commented Jul 27, 2016

Thanks 👍

@asianriceballs

This comment has been minimized.

Copy link

commented Oct 10, 2016

beautiful! thanks!

@kevashcraft

This comment has been minimized.

Copy link

commented Nov 23, 2016

Just what I needed; thank you!!

@dididflash

This comment has been minimized.

Copy link

commented Feb 27, 2017

Thanks...
I need this

@tapfumamanhanga

This comment has been minimized.

Copy link

commented May 11, 2017

Thanks it worked for me. Just what I needed 👍

@matiasalafro

This comment has been minimized.

Copy link

commented Aug 23, 2017

box-shadow

@susant123

This comment has been minimized.

Copy link

commented Dec 10, 2017

This is good except one issue. If two boxes are stacked and you want to add a left or right shadow, there will be gaps like in below screenshot.

image

with border removed and with darker shade it look like below

image

@illvart

This comment has been minimized.

Copy link

commented May 6, 2018

Great! Thanks for sharing.

@lkbhargav

This comment has been minimized.

Copy link

commented Jun 12, 2018

Perfect! Got it working! Thanks @sksar!

@pandyandi

This comment has been minimized.

Copy link

commented Jul 26, 2018

thanks so much, very usefull!

@jcfauchet

This comment has been minimized.

Copy link

commented Sep 5, 2018

Nice ! Thank you for sharing

@willjw3

This comment has been minimized.

Copy link

commented Sep 28, 2018

Worked for me. Thanks!

@akratellio

This comment has been minimized.

Copy link

commented Oct 21, 2018

👍

@AbdallahBedir

This comment has been minimized.

Copy link

commented Dec 4, 2018

Thanks

@manzolirch

This comment has been minimized.

Copy link

commented Feb 19, 2019

nice :)

@boywondercreative

This comment has been minimized.

Copy link

commented May 23, 2019

Danke!

@eyecatchup

This comment has been minimized.

Copy link

commented Jul 12, 2019

Here's a complete list for one-sided, two-sided and three-sided variants: https://codepen.io/eyecatchup/full/wLZgMJ

@Nelson-J

This comment has been minimized.

Copy link

commented Jul 15, 2019

Thanks, great illustration

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.