One-div-8bit playing card [box-shadow hack]

HTML

              
                .card

CSS

              
                $red: #944534;
$yel: #fd9e3a;
$gre: #babab4;
$grd: #453f3a;
$bla: #1e1d1b;
$whi: #f0efe5;
$pin: #fbc696;
$blu: #2986bb;

$bkg: #eef1e6;

body {  
  background: $bla;
}

.card {
  display: block;
  position: absolute;
  top: calc(50% - 133px);
  left: calc(50% - 97px);
  width: 194px;
  height: 266px;
  border-radius: 14px;
  background: $bkg;
  &:before, &:after {
    display: block;
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    --bs-red: #{$red};
    --bs-yel: #{$yel};
    --bs-gre: #{$gre};
    --bs-grd: #{$grd};
    --bs-bla: #{$bla};
    --bs-whi: #{$whi};
    --bs-pin: #{$pin};
    --bs-blu: #{$blu};
    --spread: 0px;
    @extend %king;
    background: $red;
  }  
  &:before {
    top: 16px;
    left: 16px;
  }
  &:after {
    top: 244px;
    left: 172px;
    transform: rotate(180deg);
  }
}

%king {
  box-shadow: 
    0px   0px var(--spread) var(--bs-red),
    12px  0px var(--spread) var(--bs-red),
    48px  0px var(--spread) var(--bs-yel),
    72px  0px var(--spread) var(--bs-yel),
    96px  0px var(--spread) var(--bs-yel),
    120px 0px var(--spread) var(--bs-gre),
    
    0px   6px var(--spread) var(--bs-red),
    6px   6px var(--spread) var(--bs-red),
    48px  6px var(--spread) var(--bs-yel),
    54px  6px var(--spread) var(--bs-yel),
    66px  6px var(--spread) var(--bs-yel),
    72px  6px var(--spread) var(--bs-yel),
    78px  6px var(--spread) var(--bs-yel),
    90px  6px var(--spread) var(--bs-yel),
    96px  6px var(--spread) var(--bs-yel),
    114px 6px var(--spread) var(--bs-gre),
    132px 6px var(--spread) var(--bs-yel),
    138px 6px var(--spread) var(--bs-yel),
    
    0px   12px var(--spread) var(--bs-red),
    12px  12px var(--spread) var(--bs-red),
    48px  12px var(--spread) var(--bs-bla),
    54px  12px var(--spread) var(--bs-yel),
    60px  12px var(--spread) var(--bs-yel),
    66px  12px var(--spread) var(--bs-yel),
    72px  12px var(--spread) var(--bs-yel),
    78px  12px var(--spread) var(--bs-yel),
    84px  12px var(--spread) var(--bs-yel),
    90px  12px var(--spread) var(--bs-yel),
    96px  12px var(--spread) var(--bs-yel),
    114px 12px var(--spread) var(--bs-gre),
    120px 12px var(--spread) var(--bs-gre),
    132px 12px var(--spread) var(--bs-bla),
    138px 12px var(--spread) var(--bs-bla),
    
    0px   18px var(--spread) var(--bs-red),
    12px  18px var(--spread) var(--bs-red),
    24px  18px var(--spread) var(--bs-bla),
    30px  18px var(--spread) var(--bs-bla),
    36px  18px var(--spread) var(--bs-bla), 
    42px  18px var(--spread) var(--bs-bla), 
    48px  18px var(--spread) var(--bs-red),
    54px  18px var(--spread) var(--bs-bla),
    60px  18px var(--spread) var(--bs-yel),
    66px  18px var(--spread) var(--bs-red),
    72px  18px var(--spread) var(--bs-yel),
    78px  18px var(--spread) var(--bs-red),
    84px  18px var(--spread) var(--bs-yel),
    90px  18px var(--spread) var(--bs-red),
    96px  18px var(--spread) var(--bs-yel),
    102px 18px var(--spread) var(--bs-bla),
    108px 18px var(--spread) var(--bs-bla),
    114px 18px var(--spread) var(--bs-gre),
    120px 18px var(--spread) var(--bs-gre),
    126px 18px var(--spread) var(--bs-gre),
    132px 18px var(--spread) var(--bs-gre),
    138px 18px var(--spread) var(--bs-gre),
    
    24px  24px var(--spread) var(--bs-bla),
    48px  24px var(--spread) var(--bs-bla),
    54px  24px var(--spread) var(--bs-yel),
    60px  24px var(--spread) var(--bs-yel),
    66px  24px var(--spread) var(--bs-yel),
    72px  24px var(--spread) var(--bs-yel),
    78px  24px var(--spread) var(--bs-yel),
    84px  24px var(--spread) var(--bs-yel),
    90px  24px var(--spread) var(--bs-yel),
    96px  24px var(--spread) var(--bs-yel),
    114px 24px var(--spread) var(--bs-gre),
    120px 24px var(--spread) var(--bs-gre),
    132px 24px var(--spread) var(--bs-bla),
    138px 24px var(--spread) var(--bs-bla),
    
    6px   30px var(--spread) var(--bs-red),
    24px  30px var(--spread) var(--bs-bla),
    48px  30px var(--spread) var(--bs-pin),
    54px  30px var(--spread) var(--bs-pin),
    60px  30px var(--spread) var(--bs-pin),
    66px  30px var(--spread) var(--bs-pin),
    72px  30px var(--spread) var(--bs-bla),
    78px  30px var(--spread) var(--bs-bla),
    84px  30px var(--spread) var(--bs-bla),
    90px  30px var(--spread) var(--bs-bla),
    96px  30px var(--spread) var(--bs-bla),
    114px 30px var(--spread) var(--bs-gre),
    132px 30px var(--spread) var(--bs-gre),
    138px 30px var(--spread) var(--bs-gre),
    
    0px   36px var(--spread) var(--bs-red),
    6px   36px var(--spread) var(--bs-red),
    12px  36px var(--spread) var(--bs-red),
    24px  36px var(--spread) var(--bs-bla),
    48px  36px var(--spread) var(--bs-bla),
    54px  36px var(--spread) var(--bs-bla),
    60px  36px var(--spread) var(--bs-pin),
    66px  36px var(--spread) var(--bs-pin),
    72px  36px var(--spread) var(--bs-bla),
    78px  36px var(--spread) var(--bs-bla),
    84px  36px var(--spread) var(--bs-bla),
    90px  36px var(--spread) var(--bs-bla),
    96px  36px var(--spread) var(--bs-bla),
    120px 36px var(--spread) var(--bs-gre),
    132px 36px var(--spread) var(--bs-gre),
    138px 36px var(--spread) var(--bs-gre),
    
    0px   42px var(--spread) var(--bs-red),
    6px   42px var(--spread) var(--bs-red),
    12px  42px var(--spread) var(--bs-red),
    24px  42px var(--spread) var(--bs-bla),
    48px  42px var(--spread) var(--bs-pin),
    54px  42px var(--spread) var(--bs-whi),
    60px  42px var(--spread) var(--bs-pin),
    66px  42px var(--spread) var(--bs-pin),
    72px  42px var(--spread) var(--bs-bla),
    78px  42px var(--spread) var(--bs-bla),
    84px  42px var(--spread) var(--bs-bla),
    90px  42px var(--spread) var(--bs-bla),
    96px  42px var(--spread) var(--bs-bla),
    102px 42px var(--spread) var(--bs-bla),
    132px 42px var(--spread) var(--bs-gre),
    138px 42px var(--spread) var(--bs-gre),
    
    6px   48px var(--spread) var(--bs-red),
    24px  48px var(--spread) var(--bs-bla),
    48px  48px var(--spread) var(--bs-bla),
    54px  48px var(--spread) var(--bs-bla),
    60px  48px var(--spread) var(--bs-bla),
    66px  48px var(--spread) var(--bs-pin),
    72px  48px var(--spread) var(--bs-pin),
    78px  48px var(--spread) var(--bs-bla),
    84px  48px var(--spread) var(--bs-bla),
    90px  48px var(--spread) var(--bs-bla),
    96px  48px var(--spread) var(--bs-bla),
    102px 48px var(--spread) var(--bs-bla),
    132px 48px var(--spread) var(--bs-bla),
    138px 48px var(--spread) var(--bs-bla),
    
    24px  54px var(--spread) var(--bs-bla),
    48px  54px var(--spread) var(--bs-pin),
    54px  54px var(--spread) var(--bs-pin),
    60px  54px var(--spread) var(--bs-bla),
    66px  54px var(--spread) var(--bs-bla),
    72px  54px var(--spread) var(--bs-pin),
    78px  54px var(--spread) var(--bs-bla),
    84px  54px var(--spread) var(--bs-bla),
    90px  54px var(--spread) var(--bs-bla),
    96px  54px var(--spread) var(--bs-bla),
    102px 54px var(--spread) var(--bs-bla),
    108px 54px var(--spread) var(--bs-bla),
    132px 54px var(--spread) var(--bs-bla),
    138px 54px var(--spread) var(--bs-bla),

    24px  60px var(--spread) var(--bs-bla),
    42px  60px var(--spread) var(--bs-bla),
    48px  60px var(--spread) var(--bs-bla),
    54px  60px var(--spread) var(--bs-pin),
    60px  60px var(--spread) var(--bs-bla),
    66px  60px var(--spread) var(--bs-bla),
    72px  60px var(--spread) var(--bs-bla),
    78px  60px var(--spread) var(--bs-bla),
    84px  60px var(--spread) var(--bs-bla),
    90px  60px var(--spread) var(--bs-whi),
    96px  60px var(--spread) var(--bs-red),
    102px 60px var(--spread) var(--bs-red),
    108px 60px var(--spread) var(--bs-red),
    114px 60px var(--spread) var(--bs-red),
    120px 60px var(--spread) var(--bs-red),
    132px 60px var(--spread) var(--bs-bla),
    138px 60px var(--spread) var(--bs-bla),
    
    24px  66px var(--spread) var(--bs-bla),
    36px  66px var(--spread) var(--bs-red),
    42px  66px var(--spread) var(--bs-bla),
    48px  66px var(--spread) var(--bs-bla),
    54px  66px var(--spread) var(--bs-bla),
    60px  66px var(--spread) var(--bs-bla),
    66px  66px var(--spread) var(--bs-bla),
    72px  66px var(--spread) var(--bs-bla),
    78px  66px var(--spread) var(--bs-bla),
    84px  66px var(--spread) var(--bs-whi),
    90px  66px var(--spread) var(--bs-whi),
    96px  66px var(--spread) var(--bs-red),
    102px 66px var(--spread) var(--bs-red),
    108px 66px var(--spread) var(--bs-bla),
    114px 66px var(--spread) var(--bs-bla),
    120px 66px var(--spread) var(--bs-bla),
    126px 66px var(--spread) var(--bs-bla),
    132px 66px var(--spread) var(--bs-bla),
    138px 66px var(--spread) var(--bs-bla),
    
    24px  72px var(--spread) var(--bs-bla),
    30px  72px var(--spread) var(--bs-bla),
    36px  72px var(--spread) var(--bs-red),
    42px  72px var(--spread) var(--bs-whi),
    48px  72px var(--spread) var(--bs-whi),
    54px  72px var(--spread) var(--bs-bla),
    60px  72px var(--spread) var(--bs-bla),
    66px  72px var(--spread) var(--bs-bla),
    72px  72px var(--spread) var(--bs-bla),
    78px  72px var(--spread) var(--bs-whi),
    84px  72px var(--spread) var(--bs-whi),
    90px  72px var(--spread) var(--bs-red),
    96px  72px var(--spread) var(--bs-red),
    102px 72px var(--spread) var(--bs-bla),
    108px 72px var(--spread) var(--bs-bla),
    114px 72px var(--spread) var(--bs-yel),
    120px 72px var(--spread) var(--bs-yel),
    126px 72px var(--spread) var(--bs-yel),
    132px 72px var(--spread) var(--bs-bla),
    138px 72px var(--spread) var(--bs-bla),
    
    24px  78px var(--spread) var(--bs-bla),
    30px  78px var(--spread) var(--bs-bla),
    36px  78px var(--spread) var(--bs-red),
    42px  78px var(--spread) var(--bs-red),
    48px  78px var(--spread) var(--bs-whi),
    54px  78px var(--spread) var(--bs-bla),
    60px  78px var(--spread) var(--bs-blu),
    66px  78px var(--spread) var(--bs-blu),
    72px  78px var(--spread) var(--bs-bla),
    78px  78px var(--spread) var(--bs-whi),
    84px  78px var(--spread) var(--bs-red),
    90px  78px var(--spread) var(--bs-red),
    96px  78px var(--spread) var(--bs-red),
    102px 78px var(--spread) var(--bs-bla),
    108px 78px var(--spread) var(--bs-yel),
    114px 78px var(--spread) var(--bs-bla),
    120px 78px var(--spread) var(--bs-bla),
    126px 78px var(--spread) var(--bs-bla),
    132px 78px var(--spread) var(--bs-bla),
    138px 78px var(--spread) var(--bs-bla),
    
    18px  84px var(--spread) var(--bs-yel),
    24px  84px var(--spread) var(--bs-yel),
    30px  84px var(--spread) var(--bs-bla),
    36px  84px var(--spread) var(--bs-bla),
    42px  84px var(--spread) var(--bs-red),
    48px  84px var(--spread) var(--bs-whi),
    54px  84px var(--spread) var(--bs-bla),
    60px  84px var(--spread) var(--bs-bla),
    66px  84px var(--spread) var(--bs-bla),
    72px  84px var(--spread) var(--bs-bla),
    78px  84px var(--spread) var(--bs-whi),
    84px  84px var(--spread) var(--bs-red),
    90px  84px var(--spread) var(--bs-red),
    96px  84px var(--spread) var(--bs-bla),
    102px 84px var(--spread) var(--bs-bla),
    108px 84px var(--spread) var(--bs-yel),
    114px 84px var(--spread) var(--bs-bla),
    120px 84px var(--spread) var(--bs-red),
    126px 84px var(--spread) var(--bs-red),
    132px 84px var(--spread) var(--bs-bla),
    138px 84px var(--spread) var(--bs-bla),
    
    18px  90px var(--spread) var(--bs-bla),
    24px  90px var(--spread) var(--bs-bla),
    30px  90px var(--spread) var(--bs-yel),
    36px  90px var(--spread) var(--bs-bla),
    42px  90px var(--spread) var(--bs-red),
    48px  90px var(--spread) var(--bs-whi),
    54px  90px var(--spread) var(--bs-bla),
    60px  90px var(--spread) var(--bs-blu),
    66px  90px var(--spread) var(--bs-blu),
    72px  90px var(--spread) var(--bs-bla),
    78px  90px var(--spread) var(--bs-whi),
    84px  90px var(--spread) var(--bs-red),
    90px  90px var(--spread) var(--bs-red),
    96px  90px var(--spread) var(--bs-bla),
    102px 90px var(--spread) var(--bs-yel),
    108px 90px var(--spread) var(--bs-bla),
    114px 90px var(--spread) var(--bs-bla),
    120px 90px var(--spread) var(--bs-red),
    126px 90px var(--spread) var(--bs-red),
    132px 90px var(--spread) var(--bs-bla),
    138px 90px var(--spread) var(--bs-bla),
    
    12px  96px var(--spread) var(--bs-bla),
    18px  96px var(--spread) var(--bs-bla),
    24px  96px var(--spread) var(--bs-bla),
    30px  96px var(--spread) var(--bs-bla),
    36px  96px var(--spread) var(--bs-bla),
    42px  96px var(--spread) var(--bs-red),
    48px  96px var(--spread) var(--bs-whi),
    54px  96px var(--spread) var(--bs-bla),
    60px  96px var(--spread) var(--bs-bla),
    66px  96px var(--spread) var(--bs-bla),
    72px  96px var(--spread) var(--bs-bla),
    78px  96px var(--spread) var(--bs-whi),
    84px  96px var(--spread) var(--bs-red),
    90px  96px var(--spread) var(--bs-red),
    96px  96px var(--spread) var(--bs-bla),
    102px 96px var(--spread) var(--bs-yel),
    108px 96px var(--spread) var(--bs-bla),
    114px 96px var(--spread) var(--bs-red),
    120px 96px var(--spread) var(--bs-red),
    126px 96px var(--spread) var(--bs-red),
    132px 96px var(--spread) var(--bs-bla),
    138px 96px var(--spread) var(--bs-bla),
    
    12px  102px var(--spread) var(--bs-bla),
    18px  102px var(--spread) var(--bs-grd),
    24px  102px var(--spread) var(--bs-grd),
    30px  102px var(--spread) var(--bs-bla),
    36px  102px var(--spread) var(--bs-bla),
    42px  102px var(--spread) var(--bs-red),
    48px  102px var(--spread) var(--bs-whi),
    54px  102px var(--spread) var(--bs-bla),
    60px  102px var(--spread) var(--bs-blu),
    66px  102px var(--spread) var(--bs-blu),
    72px  102px var(--spread) var(--bs-bla),
    78px  102px var(--spread) var(--bs-bla),
    84px  102px var(--spread) var(--bs-bla),
    90px  102px var(--spread) var(--bs-bla),
    96px  102px var(--spread) var(--bs-bla),
    102px 102px var(--spread) var(--bs-bla),
    108px 102px var(--spread) var(--bs-bla),
    114px 102px var(--spread) var(--bs-bla),
    120px 102px var(--spread) var(--bs-bla),
    126px 102px var(--spread) var(--bs-bla),
    132px 102px var(--spread) var(--bs-bla),
    138px 102px var(--spread) var(--bs-bla),
    144px 102px var(--spread) var(--bs-bla),
    
    12px  108px var(--spread) var(--bs-bla),
    18px  108px var(--spread) var(--bs-bla),
    24px  108px var(--spread) var(--bs-bla),
    30px  108px var(--spread) var(--bs-bla),
    36px  108px var(--spread) var(--bs-bla),
    42px  108px var(--spread) var(--bs-red),
    48px  108px var(--spread) var(--bs-whi),
    54px  108px var(--spread) var(--bs-bla),
    60px  108px var(--spread) var(--bs-bla),
    66px  108px var(--spread) var(--bs-bla),
    72px  108px var(--spread) var(--bs-bla),
    78px  108px var(--spread) var(--bs-bla),
    84px  108px var(--spread) var(--bs-yel),
    90px  108px var(--spread) var(--bs-red),
    96px  108px var(--spread) var(--bs-yel),
    102px 108px var(--spread) var(--bs-red),
    108px 108px var(--spread) var(--bs-yel),
    114px 108px var(--spread) var(--bs-bla),
    120px 108px var(--spread) var(--bs-pin),
    126px 108px var(--spread) var(--bs-bla),
    132px 108px var(--spread) var(--bs-pin),
    138px 108px var(--spread) var(--bs-pin),
    144px 108px var(--spread) var(--bs-bla),
    
    12px  114px var(--spread) var(--bs-bla),
    18px  114px var(--spread) var(--bs-pin),
    24px  114px var(--spread) var(--bs-pin),
    30px  114px var(--spread) var(--bs-bla),
    36px  114px var(--spread) var(--bs-bla),
    42px  114px var(--spread) var(--bs-bla),
    48px  114px var(--spread) var(--bs-bla),
    54px  114px var(--spread) var(--bs-bla),
    60px  114px var(--spread) var(--bs-bla),
    66px  114px var(--spread) var(--bs-bla),
    72px  114px var(--spread) var(--bs-red),
    78px  114px var(--spread) var(--bs-yel),
    84px  114px var(--spread) var(--bs-red),
    90px  114px var(--spread) var(--bs-bla),
    96px  114px var(--spread) var(--bs-bla),
    102px 114px var(--spread) var(--bs-bla),
    108px 114px var(--spread) var(--bs-bla),
    114px 114px var(--spread) var(--bs-bla),
    120px 114px var(--spread) var(--bs-bla),
    126px 114px var(--spread) var(--bs-bla),
    132px 114px var(--spread) var(--bs-pin),
    138px 114px var(--spread) var(--bs-pin),
    144px 114px var(--spread) var(--bs-bla);
}

JS

              
                
// Original Shot by
// Michael B. Myers Jr.
// https://dribbble.com/drawsgood
// https://dribbble.com/shots/6376259-Kings-8Bit-Deck

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions