UI designer

Vue Shadow Editor Component

Beta

Build CSS box shadows using the same layers as the theme editor.

Try it

Live shadow

0px 8px 18px -6px rgba(0, 0, 0, 0.20)

Use in your application

Import createShadow and shadowListToCss from @getdom/studio/vue. Each layer has id, enabled, kind (drop, inset or ring), color, alpha (0–100), x, y, blur and spread in pixels. The editor emits new arrays and change events with { layers, css }. It never mutates your input array.

vue

<DomShadowEditor v-model="shadows" />

Open the complete social-card example →