How to create a boxshadow?

Background-color

1
2
3
4

Shadow-Color

#Color

Horizontal Move

0px

Vertical Move

0px

Blur Point

27px

Spread Point

-5px

box-shadow: 0px 0px 27px -5px #Color ;

Copy

Beautiful CSS box-shadow examples

Here are the top beautiful css box-shadows showcased on how to create a box shadow? (just click on the box-shadow div to copy its box-shadow value.) Credit Csscan


📌 You can bookmark this website by pressing Ctrl+D

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#22

#23

#24

#25

#26

#27

#28

#29

#30

#31

#32

#33

#34

#35

#36

#37

#38

#39

#40

#41

#42

#43

#44

#45

#46

#47

#48

#49

#50

#51

#52

#53

#54

#55

#56

#57

#58

#59

#60

#61

#62

#63

#64

#65

#66

#67

#68

#69

#70

#71

#72

#73

#74

#75

#76

#77

#78

#79

#80

#81

#82

#83

#84

#85

#86

#87

box-shadow generator online | 86 beautiful box-shadows

box-shadow,css box-shadow,box-shadow css,css3 box-shadow,css box-shadows,css box-shadows tutorial,multi box-shadow,css box-shadows explained,box-shadow tutorial,css inset box-shadow,box-shadow generator,css box-shadow tutorial,css box-shadow tutorial basics,css box-shadow tutorial: the basics,box-shadow css3,тень box-shadow,box-shadow hacks,gerador box-shadow,como usar box-shadow,box-shadow animation,propiedad box-shadow,box-shadow transition,layered box-shadows,tutorial css box-shadow

What is a box-shadow in CSS?

The box-shadow is a CSS property which adds a  shadow effect around an element's frame. you'll set multiple effects separated by commas. A box-shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

 

Box-shadow Syntax

/* Keyword values */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset;

Offset-x

offset-x is just a box-shadow value where shadows go on the horizontal way. It means whenever you input the offset-x value it determines to follow in the left or right direction. For eg,

|this is offset-x value|<br> box-shadow: <mark>20px</mark> 0px 52px -5px #a3a3a3 ;

Picture reveals the detail on box-shadow offset-x



box-shadow,css box-shadow,box-shadow css,css3 box-shadow,css box-shadows,css box-shadows tutorial,multi box-shadow,css box-shadows explained,box-shadow tutorial,css inset box-shadow,box-shadow generator,css box-shadow tutorial,css box-shadow tutorial basics,css box-shadow tutorial: the basics,box-shadow css3,тень box-shadow,box-shadow hacks,gerador box-shadow,como usar box-shadow,box-shadow animation,propiedad box-shadow,box-shadow transition,layered box-shadows,tutorial css box-shadow


Offset-y

Same as the above one offset-x moves onto a horizontal side thus offset-y moves in the vertical direction which is top to bottom

|this is offset-y value|<br> box-shadow: 0px <mark>33px</mark> 27px -5px #808080 ;

Picture reveals the detail on box-shadow offset-y



box-shadow,css box-shadow,box-shadow css,css3 box-shadow,css box-shadows,css box-shadows tutorial,multi box-shadow,css box-shadows explained,box-shadow tutorial,css inset box-shadow,box-shadow generator,css box-shadow tutorial,css box-shadow tutorial basics,css box-shadow tutorial: the basics,box-shadow css3,тень box-shadow,box-shadow hacks,gerador box-shadow,como usar box-shadow,box-shadow animation,propiedad box-shadow,box-shadow transition,layered box-shadows,tutorial css box-shadow


Adding a Blur Value

If you want the shadow to look a little more realistic, You have to adjust the blur values.

|this is blur value|<br> box-shadow: 0px 0px <mark>40px </mark> -5px #757575 ;

Picture reveals the detail on box-shadow blur value



box-shadow,css box-shadow,box-shadow css,css3 box-shadow,css box-shadows,css box-shadows tutorial,multi box-shadow,css box-shadows explained,box-shadow tutorial,css inset box-shadow,box-shadow generator,css box-shadow tutorial,css box-shadow tutorial basics,css box-shadow tutorial: the basics,box-shadow css3,тень box-shadow,box-shadow hacks,gerador box-shadow,como usar box-shadow,box-shadow animation,propiedad box-shadow,box-shadow transition,layered box-shadows,tutorial css box-shadow


Adding a Spread Value

Spread value in the CSS box-shadow works as size or scale up or down. you can make a box shadow either small or large it depends on your required design.

|this is spread value|<br> box-shadow: 0px 0px 27px <mark>33px</mark> #bdbdbd ;

Picture reveals the detail on box-shadow spread value



box-shadow,css box-shadow,box-shadow css,css3 box-shadow,css box-shadows,css box-shadows tutorial,multi box-shadow,css box-shadows explained,box-shadow tutorial,css inset box-shadow,box-shadow generator,css box-shadow tutorial,css box-shadow tutorial basics,css box-shadow tutorial: the basics,box-shadow css3,тень box-shadow,box-shadow hacks,gerador box-shadow,como usar box-shadow,box-shadow animation,propiedad box-shadow,box-shadow transition,layered box-shadows,tutorial css box-shadow


Adding a Color

You can add color to box-shadow either on Hex Value or RGB value.

|this is color value|<br> box-shadow: 0px 0px 27px -5px <mark> #ff9999 </mark>;

Picture reveals the detail on box-shadow color value



box-shadow,css box-shadow,box-shadow css,css3 box-shadow,css box-shadows,css box-shadows tutorial,multi box-shadow,css box-shadows explained,box-shadow tutorial,css inset box-shadow,box-shadow generator,css box-shadow tutorial,css box-shadow tutorial basics,css box-shadow tutorial: the basics,box-shadow css3,тень box-shadow,box-shadow hacks,gerador box-shadow,como usar box-shadow,box-shadow animation,propiedad box-shadow,box-shadow transition,layered box-shadows,tutorial css box-shadow


What does a box-shadow generator online do?

Box-shadow generator is an online tool where you can customize your CSS box-shadow manually. This tool helps you to maintain CSS box-shadow code faster and easier. It not only contains manual functions but also you get more than 85 readymade box-shadow for free. You just needed to copy by pressing the mouse button.