Source code
Revision control
Copy as Markdown
Other Tools
---
root:
items:
- type: stacking-context
bounds: [0, 0, 1000, 1000]
items:
# 1st row
- type: box-shadow
bounds: [ 50, 50, 100, 100 ]
color: red
clip-mode: outset
blur-radius: 5
- type: box-shadow
bounds: [ 200, 50, 100, 100 ]
color: red
clip-mode: outset
offset: 20 0
blur-radius: 5
- type: box-shadow
bounds: [ 350, 50, 100, 100 ]
color: red
clip-mode: outset
offset: 0 -40
blur-radius: 5
- type: box-shadow
bounds: [ 500, 50, 100, 100 ]
color: red
clip-mode: outset
spread-radius: 30
blur-radius: 5
- type: box-shadow
bounds: [ 650, 50, 100, 100 ]
color: red
clip-mode: outset
spread-radius: 30
offset: 50 -10
blur-radius: 5
# 2nd row
- type: box-shadow
bounds: [ 50, 250, 100, 100 ]
color: green
border-radius: 32
blur-radius: 5
- type: box-shadow
bounds: [ 200, 250, 100, 100 ]
color: green
offset: 20 0
border-radius: 32
blur-radius: 5
- type: box-shadow
bounds: [ 350, 250, 100, 100 ]
color: green
offset: 0 -40
border-radius: 32
blur-radius: 5
- type: box-shadow
bounds: [ 500, 250, 100, 100 ]
color: green
spread-radius: 30
border-radius: 32
blur-radius: 5
- type: box-shadow
bounds: [ 650, 250, 100, 100 ]
color: green
spread-radius: 30
offset: 50 -10
border-radius: 32
blur-radius: 5
# 3rd row
- type: box-shadow
bounds: [ 50, 450, 100, 100 ]
color: red
clip-mode: inset
blur-radius: 5
- type: box-shadow
bounds: [ 200, 450, 100, 100 ]
color: red
clip-mode: inset
offset: 20 0
blur-radius: 5
- type: box-shadow
bounds: [ 350, 450, 100, 100 ]
color: red
clip-mode: inset
offset: 0 -40
blur-radius: 5
- type: box-shadow
bounds: [ 500, 450, 100, 100 ]
color: red
clip-mode: inset
spread-radius: 30
blur-radius: 5
- type: box-shadow
bounds: [ 650, 450, 100, 100 ]
color: red
clip-mode: inset
spread-radius: 30
offset: 50 -10
blur-radius: 5
# 4th row
- type: box-shadow
bounds: [ 50, 650, 100, 100 ]
color: red
clip-mode: inset
border-radius: 32
blur-radius: 5
- type: box-shadow
bounds: [ 200, 650, 100, 100 ]
color: red
clip-mode: inset
offset: 20 0
border-radius: 32
blur-radius: 5
- type: box-shadow
bounds: [ 350, 650, 100, 100 ]
color: red
clip-mode: inset
offset: 0 -40
border-radius: 32
blur-radius: 5
- type: box-shadow
bounds: [ 500, 650, 100, 100 ]
color: red
clip-mode: inset
spread-radius: 30
border-radius: 32
blur-radius: 5
- type: box-shadow
bounds: [ 650, 650, 100, 100 ]
color: red
clip-mode: inset
spread-radius: 30
offset: 50 -10
border-radius: 32
blur-radius: 5