Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* drop-shadow on a transparent PNG — hugs the shape */ .cutout-img { filter: drop-shadow(4px 8px 12px rgb(0 0 0 / 0.3)); } /* Icon shadow that follows the paths */ .icon-svg { filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 0.4)); fill: #1a73e8; } /* Floating card with clip-path — only drop-shadow works */ .notch-card { clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%); filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.2)); background: #fff; padding: 2rem; } /* Coloured glow on an SVG logo */ .logo { filter: drop-shadow(0 0 8px rgb(26 115 232 / 0.7)) drop-shadow(0 0 24px rgb(26 115 232 / 0.4)); }
Result
Open