central class
School management app with digital solutions for every task, from attendance to exams. Central Class is Smart and One-Stop-Solution for all your needs.
- Android / iOS App
- Website
- School Management
Freemium
Beautiful CSS box shadow examples
A CSS shadow adds depth to elements using the box-shadow or text-shadow property. It creates a visual
effect by applying an offset, blur, and color to simulate a shadow, making elements like buttons or
cards stand out and look more interactive.
1
Click to copy shadow
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
2
Click to copy shadow
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
3
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
4
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
5
Click to copy shadow
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
6
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
7
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
8
Click to copy shadow
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
9
Click to copy shadow
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
10
Click to copy shadow
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
11
Click to copy shadow
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
12
Click to copy shadow
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
13
Click to copy shadow
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
14
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
15
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
16
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
17
Click to copy shadow
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
18
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
19
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
20
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
21
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
22
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
23
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
24
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
25
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
26
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
27
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
28
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
29
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
30
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
31
Click to copy shadow
box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
32
Click to copy shadow
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
33
Click to copy shadow
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
34
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
35
Click to copy shadow
box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
36
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
37
Click to copy shadow
box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
38
Click to copy shadow
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
39
Click to copy shadow
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
40
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
41
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
42
Click to copy shadow
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
43
Click to copy shadow
box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
44
Click to copy shadow
box-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;
45
Click to copy shadow
box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
46
Click to copy shadow
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
47
Click to copy shadow
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
48
Click to copy shadow
box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
49
Click to copy shadow
box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
50
Click to copy shadow
box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
51
Click to copy shadow
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
52
Click to copy shadow
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
53
Click to copy shadow
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
54
Click to copy shadow
box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
55
Click to copy shadow
box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
56
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
57
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
58
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
59
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
60
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
61
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
62
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
63
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
64
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
65
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
66
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
67
Click to copy shadow
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
68
Click to copy shadow
box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
other products
other Premium Products, free for you
We take pride in creating premium products that stand out for their quality and innovation, yet we offer them to you completely free of charge. Our goal is to provide
exceptional value without compromising on excellence, ensuring you receive top-tier products without any cost. Experience the best without the price tag, because your
satisfaction is our priority.
Freemium
Freemium
Mo market
Transform your shop management with digital solutions for listing products, managing orders, and tracking inventory.
- Android / iOS App
- Website
- Online Marketing
free
BB infinity play
Deliver high-quality streaming experiences with an extensive range of on-demand content.
- UIUX
- Mobile
BUY NOW
web & app themes
Buy mobile and web design and developed templates for your business.
- Android / iOS App
- Website
- OTT Platform
FREE
psd mockups
Create stunning visuals with awesome free & awesome mock-ups from us
- Design
- Mockups
- Adobe Photoshop
free
CSS SHADOW PRESETS
Enhance your designs with our CSS Shadow Presets—effortless styles for a sleek, modern look. Perfect for adding depth and dimension with just a few clicks
- UIUX
- Development
- Web
free
CSS gradient & patterns
Effortlessly create stunning gradient designs with precision and ease.
- UIUX
- Development
- Mobile
'%3e%3cpath%20d='M15.0037%200H14.9963C6.72563%200%200%206.7275%200%2015C0%2018.2812%201.0575%2021.3225%202.85562%2023.7919L0.98625%2029.3644L6.75187%2027.5213C9.12375%2029.0925%2011.9531%2030%2015.0037%2030C23.2744%2030%2030%2023.2706%2030%2015C30%206.72938%2023.2744%200%2015.0037%200Z'%20fill='%23075E54'/%3e%3cpath%20d='M23.7318%2021.1821C23.3699%2022.204%2021.9337%2023.0515%2020.788%2023.299C20.0043%2023.4658%2018.9805%2023.599%2015.5343%2022.1702C11.1262%2020.344%208.28741%2015.8646%208.06616%2015.574C7.85429%2015.2833%206.28491%2013.2021%206.28491%2011.0496C6.28491%208.89709%207.37804%207.84897%207.81866%207.39897C8.18054%207.02959%208.77866%206.86084%209.35241%206.86084C9.53804%206.86084%209.70491%206.87021%209.85491%206.87771C10.2955%206.89646%2010.5168%206.92272%2010.8074%207.61834C11.1693%208.49022%2012.0505%2010.6427%2012.1555%2010.864C12.2624%2011.0852%2012.3693%2011.3852%2012.2193%2011.6758C12.0787%2011.9758%2011.9549%2012.109%2011.7337%2012.364C11.5124%2012.619%2011.3024%2012.814%2011.0812%2013.0877C10.8787%2013.3258%2010.6499%2013.5808%2010.9049%2014.0215C11.1599%2014.4527%2012.0412%2015.8908%2013.3387%2017.0458C15.013%2018.5365%2016.3705%2019.0127%2016.8562%2019.2152C17.218%2019.3652%2017.6493%2019.3296%2017.9137%2019.0483C18.2493%2018.6865%2018.6637%2018.0865%2019.0855%2017.4958C19.3855%2017.0721%2019.7643%2017.0196%2020.1618%2017.1696C20.5668%2017.3102%2022.7099%2018.3696%2023.1505%2018.589C23.5912%2018.8102%2023.8818%2018.9152%2023.9887%2019.1008C24.0937%2019.2865%2024.0937%2020.1583%2023.7318%2021.1821Z'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2925_11986'%3e%3crect%20width='30'%20height='30'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
WhatsApp Now