$body: #0e020a;
$border: #350725;
// loop time, adjust speed here
$time: 2s;

body {
    width: 50vmin;
    height: 90vmin;
    margin: auto;
    position: relative;
    top: 1vmin;
    left: 0;
    right: 0;
    background: linear-gradient(rgba(#FEFEDA,.5),rgba(#184D77,.25) 30%, rgba(#184D77,.9) 40%,#430141 90%,rgba(#0e020a,1)), #768C96;

    &:before {
        content: '';
      //these are the pixels - try adding a border-radius here or changing the height and width
        height: 1.1vmin;
        width: 1.1vmin;
        position: absolute;
        left: 0;
        top: 0;
        animation: back $time steps(1, end) infinite;
    }

    &:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        box-shadow: inset 0 0 0 1vmin rgba($border,.25), inset 0 0 5vmin $border, inset 0 0 0 .5vmin rgba($body,.25), 0 0 0 100vmax $body;
        border-radius: 3vmin;
        z-index: 1;
    }
}

// Unfortunately my box-shadows exceed the Codepen size limit so I have to link to it externally :(

@import "https://tinydesign.co.uk/css-pixels/css-pixels/css-pixel-box-shadows.css";
View Compiled
// No HTML!
// No Javascript!
// No Images!
// Pure 100% unadulterated CSS!!

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.