window.ENTITIES={'/api/snippets/html/css%20-%20add%20internal%20bottom%20shadow%20inside%20html%20element':[{"result":true,"message":null,"batch":{"type":"html","name":"css - add internal bottom shadow inside html element","items":[{"id":"p2VwAp","type":"html","name":"CSS - add internal bottom shadow inside HTML element","content":"// ONLINE-RUNNER:browser;\n\n<style>\n\n    .element {\n        border: 1px solid silver;\n        overflow: hidden;\n    }\n  \n    .element::after {\n        margin: 0 -10px;\n        height: 20px;\n        box-shadow: inset rgb(0 0 0 / 5%) 0px -7px 10px;\n        display: block;\n        content: '';\n    }\n\n</style>\n\n<div class=\"element\">\n  1<br />\n  2<br />\n  3<br />\n</div>","source":"","author":{"id":"4o2mQa","name":"Kevin","avatar":"1629141224994__4o2mQa__w40px_h40px.jpg","points":797,"role":"BASIC"},"creationTime":1742616599000,"updateTime":1742645748000,"removalTime":null},{"id":"Dd5nop","type":"html","name":"CSS - add internal bottom shadow inside HTML element","content":"// ONLINE-RUNNER:browser;\n\n<style>\n\n    .element {\n        position: relative;\n        border: 1px solid silver;\n        overflow: hidden;\n    }\n  \n    .element::after {\n        position: absolute;\n        left: -7px;\n        right: -7px;\n        bottom: 0;\n        height: 20px;\n        box-shadow: inset rgb(0 0 0 / 5%) 0px -7px 10px;\n        display: block;\n        content: '';\n        z-index: -1;\n    }\n\n</style>\n\n<div class=\"element\">\n  1<br />\n  2<br />\n  3<br />\n</div>","source":"","author":{"id":"505Y10","name":"Wiktor-Sribiew","avatar":"1629126875612__505Y10__w40px_h40px.jpg","points":830,"role":"BASIC"},"creationTime":1742645945000,"updateTime":1742665285000,"removalTime":null},{"id":"jEwzRD","type":"html","name":"CSS - add internal bottom shadow inside HTML element","content":"// ONLINE-RUNNER:browser;\n\n<style>\n\n    .element {\n        border: 1px solid silver;\n        overflow: hidden;\n    }\n  \n    .element::after {\n        margin: 0;\n        height: 20px;\n        background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0));\n        display: block;\n        content: '';\n    }\n\n</style>\n\n<div class=\"element\">\n  1<br />\n  2<br />\n  3<br />\n</div>","source":"","author":{"id":"P0zyGo","name":"Isaiah89","avatar":"1629141062591__P0zyGo__w40px_h40px.jpg","points":721,"role":"BASIC"},"creationTime":1742653291000,"updateTime":1742653484000,"removalTime":null},{"id":"D6d3dj","type":"html","name":"CSS - add internal bottom shadow inside HTML element","content":"// ONLINE-RUNNER:browser;\n\n<style>\n\n    .element {\n        position: relative;\n        border: 1px solid silver;\n        overflow: hidden;\n    }\n  \n    .element::after {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 20px;\n        background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0));\n        display: block;\n        content: '';\n        z-index: -1;\n    }\n\n</style>\n\n<div class=\"element\">\n  1<br />\n  2<br />\n  3<br />\n</div>","source":"","author":{"id":"V0JqLo","name":"Inayah-Alexander","avatar":"1629131792850__V0JqLo__w40px_h40px.jpg","points":767,"role":"BASIC"},"creationTime":1742653304000,"updateTime":1742665322000,"removalTime":null}]}}]};