body { background: black; } * { margin: 0; padding: 0; } /* Monitor */ .bezel { position: relative; display: block; margin: 25px auto; border-bottom: 300px solid beige; border-left: 80px solid transparent; border-right: 80px solid transparent; height: 0; width: 390px; } .border { position: absolute; display: block; top: 10px; left: -70px; border-bottom: 280px solid #3d3d3d; border-left: 75px solid transparent; border-right: 75px solid transparent; height: 0; width: 380px; } .gradient { position: absolute; display: block; height: 300px; width: 550px; top: -10px; left: -85px; background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0)); } .screen-cutout { position: absolute; display: block; height: 220px; width: 320px; top: 40px; left: 115px; border-radius: 20px; background: linear-gradient(#202020, #262626); } .screen { position: absolute; display: block; height: 210px; width: 310px; top: 5px; left: 5px; border-radius: 20px; background: radial-gradient(#808080, #666666); box-shadow: 0 0 20px 10px #2B3030 inset; }