Tailwind CSS box-shadow examples
1
Click to copy box shadow 1
shadow-[0_10px_30px_rgba(149,157,165,0.25)]2
Click to copy box shadow 2
shadow-[0_10px_35px_rgba(100,100,111,0.25)]3
Click to copy box shadow 3
shadow-[2px_2px_3px_rgba(0,0,0,0.2)]4
Click to copy box shadow 4
shadow-[0_6px_20px_rgba(0,0,0,0.4)]5
Click to copy box shadow 5
shadow-[0_4px_12px_rgba(0,0,0,0.3)]6
Click to copy box shadow 6
shadow-[0_4px_12px_rgba(99,99,99,0.25)]7
Click to copy box shadow 7
shadow-[0_2px_6px_rgba(0,0,0,0.2),0_2px_8px_rgba(51,51,51,0.4)]8
Click to copy box shadow 8
shadow-[0_2px_4px_rgba(0,0,0,0.1),0_4px_6px_rgba(27,31,35,0.2)]9
Click to copy box shadow 9
shadow-[0_60px_60px_rgba(0,0,0,0.3),0_-10px_30px_rgba(0,0,0,0.15),0_5px_5px_rgba(0,0,0,0.15),0_15px_15px_rgba(0,0,0,0.2),0_-5px_5px_rgba(0,0,0,0.1)]10
Click to copy box shadow 10
shadow-[0_50px_100px_rgba(17,12,46,0.2)]11
Click to copy box shadow 11
shadow-[0_8px_15px_-3px_rgba(50,50,93,0.3),0_4px_6px_-2px_rgba(0,0,0,0.35)]12
Click to copy box shadow 12
shadow-[0_15px_30px_-5px_rgba(50,50,93,0.3),0_9px_18px_-8px_rgba(0,0,0,0.35)]13
Click to copy box shadow 13
shadow-[0_35px_65px_-15px_rgba(50,50,93,0.3),0_25px_50px_-20px_rgba(0,0,0,0.35)]14
Click to copy box shadow 14
shadow-[inset_0_35px_65px_-15px_rgba(50,50,93,0.25),inset_0_25px_50px_-20px_rgba(0,0,0,0.3)]15
Click to copy box shadow 15
shadow-[0_55px_105px_-30px_rgba(50,50,93,0.3),0_35px_75px_-35px_rgba(0,0,0,0.35)]16
Click to copy box shadow 16
shadow-[0_1px_5px_rgba(0,0,0,0.15),0_2px_2px_rgba(0,0,0,0.2)]17
Click to copy box shadow 17
shadow-[rgba(0,0,0,0.15)_0_12px_60px]18
Click to copy box shadow 18
shadow-[rgba(0,0,0,0.07)_0_3px_6px]19
Click to copy box shadow 19
shadow-[rgba(0,0,0,0.1)_0_2px_4px,rgba(0,0,0,0.1)_0_4px_8px,rgba(0,0,0,0.1)_0_8px_16px,rgba(0,0,0,0.1)_0_16px_32px,rgba(0,0,0,0.1)_0_32px_64px]20
Click to copy box shadow 20
shadow-[rgba(0,0,0,0.15)_0_2px_4px]21
Click to copy box shadow 21
shadow-[rgba(14,30,37,0.15)_0_3px_6px,rgba(14,30,37,0.35)_0_3px_18px]22
Click to copy box shadow 22
shadow-[rgba(0,0,0,0.5)_0_30px_25px_-20px]23
Click to copy box shadow 23
shadow-[0px_3px_6px_rgba(0,0,0,.5),0px_8px_15px_-5px_rgba(0,0,0,.4),inset_0px_-3px_2px_rgba(0,0,0,.2)]24
Click to copy box shadow 24
shadow-[0_0_0_2px_rgba(0,0,0,0.1),inset_0_0_0_1px_rgb(209,213,219)]25
Click to copy box shadow 25
shadow-[inset_0px_-55px_45px_-35px_rgba(0,0,0,0.4)]by 3drops26
Click to copy box shadow 26
shadow-[0_1px_4px_rgba(0,0,0,0.16)]by Sketch27
Click to copy box shadow 27
shadow-[0_4px_12px_rgba(0,0,0,0.1)]by Sketch28
Click to copy box shadow 28
shadow-[0_6px_24px_0_rgba(0,0,0,0.05),0_0_0_1px_rgba(0,0,0,0.08)]by Sketch29
Click to copy box shadow 29
shadow-[0_10px_36px_0_rgba(0,0,0,0.16),0_0_0_1px_rgba(0,0,0,0.06)]by Stripe30
Click to copy box shadow 30
shadow-[0_50px_100px_-20px_rgba(50,50,93,0.25),0_30px_60px_-30px_rgba(0,0,0,0.3),0_-2px_6px_0_inset_rgba(10,37,64,0.35)]by Stripe31
Click to copy box shadow 31
shadow-[0_1px_1px_0_inset_rgba(255,255,255,0.1),0_50px_100px_-20px_rgba(50,50,93,0.25),0_30px_60px_-30px_rgba(0,0,0,0.3)]by Stripe32
Click to copy box shadow 32
shadow-[0_50px_100px_-20px_rgba(50,50,93,0.25),0_30px_60px_-30px_rgba(0,0,0,0.3)]by Stripe33
Click to copy box shadow 33
shadow-[0_50px_100px_-20px_rgba(50,50,93,0.25),0_30px_60px_-30px_rgba(0,0,0,0.3)]by Stripe34
Click to copy box shadow 34
shadow-[0_13px_27px_-5px_rgba(50,50,93,0.25),0_8px_16px_-8px_rgba(0,0,0,0.3)]by Stripe35
Click to copy box shadow 35
shadow-[0_2px_5px_-1px_rgba(50,50,93,0.25),0_1px_3px_-1px_rgba(0,0,0,0.3)]by Stripe36
Click to copy box shadow 36
shadow-[0_20px_30px_-10px_#26394d]by Stripe37
Click to copy box shadow 37
shadow-[0_0_0_2px_rgba(6,24,44,0.4),0_4px_6px_-1px_rgba(6,24,44,0.65),inset_0_1px_0_hsla(0,0%,100%,0.08)]by Material38
Click to copy box shadow 38
shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)]by Material39
Click to copy box shadow 39
shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]by Material40
Click to copy box shadow 40
shadow-[0_10px_20px_rgba(0,0,0,0.19),0_6px_6px_rgba(0,0,0,0.23)]by Material41
Click to copy box shadow 41
shadow-[0_14px_28px_rgba(0,0,0,0.25),0_10px_10px_rgba(0,0,0,0.22)]by Material42
Click to copy box shadow 42
shadow-[0_19px_38px_rgba(0,0,0,0.30),0_15px_12px_rgba(0,0,0,0.22)]by Material43
Click to copy box shadow 43
shadow-[rgba(60,64,67,0.3)_0_1px_2px_0,rgba(60,64,67,0.15)_0_2px_6px_2px]by Material44
Click to copy box shadow 44
shadow-[rgba(60,64,67,0.3)_0_1px_2px_0,rgba(60,64,67,0.15)_0_1px_3px_1px]by Tailwind CSS45
Click to copy box shadow 45
shadow-[0_0_0_1px_rgba(0,0,0,0.05)]by Tailwind CSS46
Click to copy box shadow 46
shadow-[0_1px_2px_0_rgba(0,0,0,0.05)]by Tailwind CSS47
Click to copy box shadow 47
shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_0_rgba(0,0,0,0.06)]by Tailwind CSS48
Click to copy box shadow 48
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06)]by Tailwind CSS49
Click to copy box shadow 49
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]by Tailwind CSS50
Click to copy box shadow 50
shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_10px_10px_-5px_rgba(0,0,0,0.04)]by Tailwind CSS51
Click to copy box shadow 51
shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)]by Tailwind CSS52
Click to copy box shadow 52
shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.06)]by Tobias Ahlin53
Click to copy box shadow 53
shadow-[0_1px_2px_rgba(0,0,0,0.07),0_2px_4px_rgba(0,0,0,0.07),0_4px_8px_rgba(0,0,0,0.07),0_8px_16px_rgba(0,0,0,0.07),0_16px_32px_rgba(0,0,0,0.07),0_32px_64px_rgba(0,0,0,0.07)]by Tobias Ahlin54
Click to copy box shadow 54
shadow-[0_2px_1px_rgba(0,0,0,0.09),0_4px_2px_rgba(0,0,0,0.09),0_8px_4px_rgba(0,0,0,0.09),0_16px_8px_rgba(0,0,0,0.09),0_32px_16px_rgba(0,0,0,0.09)]by feedback.fish55
Click to copy box shadow 55
shadow-[rgba(0,0,0,0.2)_0_18px_50px_-10px]by Alligator56
Click to copy box shadow 56
shadow-[-5px_5px_rgba(240,46,170,0.4),-10px_10px_rgba(240,46,170,0.3),-15px_15px_rgba(240,46,170,0.2),-20px_20px_rgba(240,46,170,0.1),-25px_25px_rgba(240,46,170,0.05)]by Alligator57
Click to copy box shadow 57
shadow-[0_5px_rgba(240,46,170,0.4),0_10px_rgba(240,46,170,0.3),0_15px_rgba(240,46,170,0.2),0_20px_rgba(240,46,170,0.1),0_25px_rgba(240,46,170,0.05)]by Alligator58
Click to copy box shadow 58
shadow-[5px_5px_rgba(240,46,170,0.4),10px_10px_rgba(240,46,170,0.3),15px_15px_rgba(240,46,170,0.2),20px_20px_rgba(240,46,170,0.1),25px_25px_rgba(240,46,170,0.05)]by pqina.nl/doka59
Click to copy box shadow 59
shadow-[rgba(67,71,85,0.27)_0_0_0.25em,rgba(90,125,188,0.05)_0_0.25em_1em]by Github60
Click to copy box shadow 60
shadow-[rgba(27,31,35,0.04)_0_1px_0,rgba(255,255,255,0.25)_0_1px_0_inset]by Github61
Click to copy box shadow 61
shadow-[rgba(3,102,214,0.3)_0_0_0_3px]by Facebook62
Click to copy box shadow 62
shadow-[0_12px_28px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),inset_0_0_0_1px_rgba(255,255,255,0.05)]by Shopify63
Click to copy box shadow 63
shadow-[rgba(0,0,0,0.15)_0_5px_15px_0]by Shopify64
Click to copy box shadow 64
shadow-[rgba(33,35,38,0.1)_0_10px_10px_-10px]by Fossheim65
Click to copy box shadow 65
shadow-[inset_blue_0_0_0_2px,10px_-10px_0_-3px_#fff,10px_-10px_#1FC11B,20px_-20px_0_-3px_#fff,20px_-20px_#FFD913,30px_-30px_0_-3px_#fff,30px_-30px_#FF9C55,40px_-40px_0_-3px_#fff,40px_-40px_#FF5555]by Fossheim66
Click to copy box shadow 66
shadow-[rgb(85,91,255)_0px_0px_0px_3px,rgb(31,193,27)_0px_0px_0px_6px,rgb(255,217,19)_0px_0px_0px_9px,rgb(255,156,85)_0px_0px_0px_12px,rgb(255,85,85)_0px_0px_0px_15px]by boxshadows.com67
Click to copy box shadow 67
shadow-[3px_3px_6px_0px_#CCDBE8_inset,-3px_-3px_6px_1px_rgba(255,255,255,0.5)_inset]by boxshadows.com68
Click to copy box shadow 68
shadow-[6px_2px_16px_0px_rgba(136,165,191,0.48),-6px_-2px_16px_0px_rgba(255,255,255,0.8)]by box-shadows.co69
Click to copy box shadow 69
shadow-[0px_1px_0px_rgba(17,17,26,0.1)]by box-shadows.co70
Click to copy box shadow 70
shadow-[0px_1px_0px_rgba(17,17,26,0.05),0px_0px_8px_rgba(17,17,26,0.1)]by box-shadows.co71
Click to copy box shadow 71
shadow-[0px_0px_16px_rgba(17,17,26,0.1)]by box-shadows.co72
Click to copy box shadow 72
shadow-[0px_4px_16px_rgba(17,17,26,0.05),0px_8px_32px_rgba(17,17,26,0.05)]by box-shadows.co73
Click to copy box shadow 73
shadow-[0px_4px_16px_rgba(17,17,26,0.1),0px_8px_32px_rgba(17,17,26,0.05)]by box-shadows.co74
Click to copy box shadow 74
shadow-[0px_1px_0px_rgba(17,17,26,0.1),0px_8px_24px_rgba(17,17,26,0.1),0px_16px_48px_rgba(17,17,26,0.1)]by box-shadows.co75
Click to copy box shadow 75
shadow-[0px_8px_24px_rgba(17,17,26,0.1),0px_16px_56px_rgba(17,17,26,0.1),0px_24px_80px_rgba(17,17,26,0.1)]by 10er.app76
Click to copy box shadow 76
shadow-[rgba(50,50,105,0.15)_0_2px_5px_0,rgba(0,0,0,0.05)_0_1px_1px_0]by wip.chat77
Click to copy box shadow 77
shadow-[0_15px_25px_rgba(0,0,0,0.15),0_5px_10px_rgba(0,0,0,0.05)]78
Click to copy box shadow 78
shadow-[rgba(0,0,0,0.15)_2.4px_2.4px_3.2px]by Airbnb79
Click to copy box shadow 79
shadow-[0_3px_3px_0_rgba(0,0,0,0.15)]by Airbnb80
Click to copy box shadow 80
shadow-[rgba(0,0,0,0.08)_0_4px_12px]by Airbnb81
Click to copy box shadow 81
shadow-[rgba(0,0,0,0.15)_0_2px_8px]by Airbnb82
Click to copy box shadow 82
shadow-[rgba(0,0,0,0.18)_0_2px_4px]by ls.graphics83
Click to copy box shadow 83
shadow-[-4px_9px_25px_-6px_rgba(0,0,0,.1)]by ls.graphics84
Click to copy box shadow 84
shadow-[0_60px_40px_-7px_rgba(0,0,0,.2)]by Lonely Planet85
Click to copy box shadow 85
shadow-[0_30px_90px_rgba(0,0,0,0.4)]by Mac86
Click to copy box shadow 86
shadow-[0_22px_70px_4px_rgba(0,0,0,0.56)]by Mac87
Click to copy box shadow 87
shadow-[0px_20px_30px_rgba(0,0,0,0.2)]by Mac88
Click to copy box shadow 88
shadow-[rgba(255,255,255,0.2)_0px_0px_0px_1px_inset,rgba(0,0,0,0.9)_0px_0px_0px_1px]by pqina.nl/doka89
Click to copy box shadow 89
shadow-[0_.0625em_.0625em_rgba(0,0,0,0.25),0_.125em_.5em_rgba(0,0,0,0.25),inset_0_0_0_1px_rgba(255,255,255,0.1)]by Typedream90
Click to copy box shadow 90
shadow-[rgba(0,0,0,0.09)_0px_3px_12px]by Trello91
Click to copy box shadow 91
shadow-[rgba(9,30,66,0.25)_0_1px_1px,rgba(9,30,66,0.13)_0_0_1px_1px]by Trello92
Click to copy box shadow 92
shadow-[rgba(9,30,66,0.25)_0_4px_8px_-2px,rgba(9,30,66,0.08)_0_0_0_1px]