UI designer

Vue Backdrop Editor Component

Beta

The theme designer’s backdrop controls as a reusable component.

Try it

Blur

12px

Saturate

1.2

Filtered backdrop

blur(12px) saturate(1.2)

Use in your application

vue

<script setup>
import { computed, ref } from 'vue';
import { DomBackdropEditor, createBackdrop, backdropToCss } from '@getdom/studio/vue';
const value = ref(createBackdrop({ enabled: true, blur: 12, saturate: 1.2 }));
const css = computed(() => backdropToCss(value.value));
</script>
<template>
	<DomBackdropEditor v-model="value" />
	<div :style="{ backdropFilter: css, WebkitBackdropFilter: css }">Your HTML</div>
</template>

The model

The backdrop record contains enabled, blur and saturate. Hiding the effect preserves its settings. Bind the serialized CSS to backdropFilter and WebkitBackdropFilter. The editor exposes blur from 0–40px and saturation from 0.5–1.8. v-model emits a copied record; change emits { backdrop, css }. The editor does not mutate your input. Use title to customize the section heading.

How the CSS works

Backdrop filters affect pixels behind the element, not its own text or children. Use a transparent or translucent fill so the effect is visible. An opaque background covers the filtered result. Blur is measured in pixels; saturation is a multiplier, where 1 leaves saturation unchanged. This differs from the poster image filters, which affect the image itself. The theme designer maps the same values to skin CSS variables. Other applications can bind them inline without a stage or layer IDs.

Try it on a poster text or shape layer →