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 type="text/css">
.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

@roier roier commented Jul 25, 2012

c': beautiful

@AdrianAntunez

This comment has been minimized.

Copy link

@AdrianAntunez AdrianAntunez commented Oct 18, 2012

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

@oliviercardoen

This comment has been minimized.

Copy link

@oliviercardoen oliviercardoen commented May 9, 2013

Thanks a lot !

@strelok1

This comment has been minimized.

Copy link

@strelok1 strelok1 commented Jul 19, 2013

Pretty sure you have .right and .left mixed up

@git-ashish

This comment has been minimized.

Copy link

@git-ashish git-ashish commented Sep 11, 2013

nice! agree with strelok1

@johnstonian

This comment has been minimized.

Copy link

@johnstonian johnstonian commented Sep 18, 2013

thanks much!

@fizerkhan

This comment has been minimized.

Copy link

@fizerkhan fizerkhan commented Dec 31, 2013

Thank you very much.

@antoniosarco

This comment has been minimized.

Copy link

@antoniosarco antoniosarco 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

@franciscocorrales franciscocorrales commented Aug 12, 2014

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

@Dansziel

This comment has been minimized.

Copy link

@Dansziel Dansziel commented Aug 18, 2014

Amazing *:P

@mikewasmike

This comment has been minimized.

Copy link

@mikewasmike mikewasmike commented Dec 4, 2014

Just what I was looking for, thanks.

@VeritoLeon

This comment has been minimized.

Copy link

@VeritoLeon VeritoLeon commented Feb 24, 2015

Thank you!

@vc1492a

This comment has been minimized.

Copy link

@vc1492a vc1492a commented Mar 8, 2015

Worked for me! Thanks!

@j0ssGZ

This comment has been minimized.

Copy link

@j0ssGZ j0ssGZ commented May 12, 2015

Perfect! Thanks a lot =)

@Korveld

This comment has been minimized.

Copy link

@Korveld Korveld commented Jun 8, 2015

Awesome! Thanks)

@sylwiaeb

This comment has been minimized.

Copy link

@sylwiaeb sylwiaeb commented Sep 18, 2015

👍

@seanvandenberg

This comment has been minimized.

Copy link

@seanvandenberg seanvandenberg commented Dec 30, 2015

Brilliant, sir!

@roma-sem

This comment has been minimized.

Copy link

@roma-sem roma-sem commented Feb 10, 2016

Thank you very much! Very neat solution!!!

@jorobogdanov

This comment has been minimized.

Copy link

@jorobogdanov jorobogdanov commented Mar 3, 2016

Really helpful !!!

@zeckdude

This comment has been minimized.

Copy link

@zeckdude zeckdude 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

@sksar sksar 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

@farskid farskid commented Jul 25, 2016

This was always a challenge for me. Thanks

@inferno7291

This comment has been minimized.

Copy link

@inferno7291 inferno7291 commented Jul 27, 2016

Thanks 👍

@asianriceballs

This comment has been minimized.

Copy link

@asianriceballs asianriceballs commented Oct 10, 2016

beautiful! thanks!

@kevashcraft

This comment has been minimized.

Copy link

@kevashcraft kevashcraft commented Nov 23, 2016

Just what I needed; thank you!!

@dididflash

This comment has been minimized.

Copy link

@dididflash dididflash commented Feb 27, 2017

Thanks...
I need this

@tapfumamanhanga

This comment has been minimized.

Copy link

@tapfumamanhanga tapfumamanhanga commented May 11, 2017

Thanks it worked for me. Just what I needed 👍

@matiasalafro

This comment has been minimized.

Copy link

@matiasalafro matiasalafro commented Aug 23, 2017

box-shadow

@susant123

This comment has been minimized.

Copy link

@susant123 susant123 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

@illvart illvart commented May 6, 2018

Great! Thanks for sharing.

@lkbhargav

This comment has been minimized.

Copy link

@lkbhargav lkbhargav commented Jun 12, 2018

Perfect! Got it working! Thanks @sksar!

@pandyandi

This comment has been minimized.

Copy link

@pandyandi pandyandi commented Jul 26, 2018

thanks so much, very usefull!

@jcfauchet

This comment has been minimized.

Copy link

@jcfauchet jcfauchet commented Sep 5, 2018

Nice ! Thank you for sharing

@willjw3

This comment has been minimized.

Copy link

@willjw3 willjw3 commented Sep 28, 2018

Worked for me. Thanks!

@akratellio

This comment has been minimized.

Copy link

@akratellio akratellio commented Oct 21, 2018

👍

@AbdallahBedir

This comment has been minimized.

Copy link

@AbdallahBedir AbdallahBedir commented Dec 4, 2018

Thanks

@manzolidev

This comment has been minimized.

Copy link

@manzolidev manzolidev commented Feb 19, 2019

nice :)

@boywondercreative

This comment has been minimized.

Copy link

@boywondercreative boywondercreative commented May 23, 2019

Danke!

@eyecatchup

This comment has been minimized.

Copy link

@eyecatchup eyecatchup 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

@Nelson-J Nelson-J commented Jul 15, 2019

Thanks, great illustration

@WebJax

This comment has been minimized.

Copy link

@WebJax WebJax commented Oct 20, 2019

Great proof

@singhayushh

This comment has been minimized.

Copy link

@singhayushh singhayushh commented Apr 29, 2020

Thanks a ton!
What if I want on the top as well as bottom?

@eyecatchup

This comment has been minimized.

Copy link

@eyecatchup eyecatchup commented Apr 29, 2020

@MaxIbanez

This comment has been minimized.

Copy link

@MaxIbanez MaxIbanez commented Oct 17, 2020

wuoo Thanks you !

@spykelion

This comment has been minimized.

Copy link

@spykelion spykelion commented Apr 10, 2021

Thanks for this dude

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment