CSS Houdini library.
<script src="https://cdn.jsdelivr.net/gh/jerosoler/css-houdini-pixel-box/pixelbox.js"></script>npm install css-houdini-pixel-boxDownload pixelbox.js file.
View support in caniuse
<script src="https://unpkg.com/css-paint-polyfill"></script>if ( "paintWorklet" in CSS && "registerProperty" in CSS && "CSSUnitValue" in window ) { CSS.registerProperty({ name: "--pixelbox-border", syntax: "<length>", initialValue: "2px", inherits: false, }); CSS.registerProperty({ name: "--pixelbox-border-radius", syntax: "<length>", initialValue: "0px", inherits: false, }); CSS.registerProperty({ name: "--pixelbox-border-color", syntax: "<color>", initialValue: "#000000", inherits: false, }); CSS.registerProperty({ name: "--pixelbox-background-color", syntax: "<color>", initialValue: "#ffffff", inherits: false, }); CSS.registerProperty({ name: "--pixelbox-background-shadow-border", syntax: "<length>", initialValue: "0px", inherits: false, }); CSS.registerProperty({ name: "--pixelbox-background-shadow-color", syntax: "<color>", initialValue: "#adafbc", inherits: false, }); /*CSS.registerProperty({ name: '--pixelbox-background-shadow-position', syntax: '<string>', initialValue: 'bottom-right', inherits: false }); */ } else { console.log("Not Supported"); } CSS.paintWorklet.addModule("pixelbox.js");div { display: inline-block; width: 200px; height: 200px; text-align: center; line-height: 200px; color: white; background-image: paint(pixelbox); --pixelbox-border: 10px; --pixelbox-border-radius: 5px; --pixelbox-border-color: #a0a0a0; --pixelbox-background-color: #000000; --pixelbox-background-shadow-border: 20px; --pixelbox-background-shadow-color: #494949; --pixelbox-background-shadow-position: bottom-right; }