CSS Drop Shadows
Want to add stylish drop shadows to your website elements? Copy and paste these CSS code snippets to enhance the visual appeal of your design instantly.
This is a success message
This is an error message
Drop shadow
.drop-shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}Inner shadow
.inner-shadow {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}Outer shadow
.outer-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}Floating shadow
.floating-shadow {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}Raised shadow
.raised-shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}Sunken shadow
.sunken-shadow {
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
}Soft shadow
.soft-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}Hard shadow
.hard-shadow {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}Long shadow
.long-shadow {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}Blurred shadow
.blurred-shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}