#grid
View Compiled
html
  height: 100%
  background: radial-gradient(ellipse at bottom, #5091DD 0%, #030617 100%)

$lineColor : #030617
$step : 3
$borderWeight: 1px

@function borderShadow ($n) 
  $value: '0px 0px #{$lineColor}'
  @for $i from 0 through $n
    $value: '#{$value} , 0px #{($step)*$i}px #{$lineColor}'
  @return unquote($value)

@function stripeShadow ($n) 
  $value: '0px 0px #{$lineColor}'
  @for $i from 0 through $n
    $value: '#{$value} , #{($step)*$i}px 0px #{$lineColor}'

  @return unquote($value)

$border:  borderShadow(1000)
$stripe:  stripeShadow(1000)

#grid
  width: 100%
  height: $borderWeight
  box-shadow: $border
  
  &:after
    content: ""
    position: absolute
    width: $borderWeight
    height: 100%
    box-shadow: $stripe
    
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.