UI designer

Vue Background Editor Component

Beta

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

Try it

Layered background

linear-gradient(135deg, rgba(244, 211, 94, 1.00) 0%, rgba(79, 70, 229, 1.00) 100%)

Use in your application

vue

<script setup>
import { computed, ref } from 'vue';
import { DomBackgroundEditor, createBackgroundState, backgroundImageToCss } from '@getdom/studio/vue';
const value = ref(createBackgroundState({ fills: [{ kind: 'linear', gradientFrom: '#f4d35e', gradientTo: '#4f46e5' }] }));
const css = computed(() => backgroundImageToCss(value.value));
</script>
<template>
	<DomBackgroundEditor v-model="value" />
	<div :style="{ backgroundImage: css }">Your HTML</div>
</template>

The model

The background record contains enabled and fills. Each fill has an id, enabled, kind (solid, linear or radial), color and alpha, plus gradientFrom, gradientTo, gradientFromAlpha, gradientToAlpha, gradientAngle, gradientFromStop and gradientToStop. Alpha and stops use 0–100; angles use degrees. Add, duplicate, hide and remove fills in the layer list. New fills are placed first. v-model emits a copied record; change emits { background, css }. The editor does not mutate your input. Use title to customize the section heading.

How the CSS works

Each enabled fill becomes a CSS background image. Solid fills are represented as flat gradients so they can be layered legally alongside linear and radial gradients. The first fill is painted on top. Alpha exposes lower layers; hiding a fill preserves its values. The underlying background colour remains separate. These controls do not create additional DOM elements or z-index classes. 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 →