> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: CSS Custom Properties

## Article: CSS Custom Properties

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/css-custom-properties.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# CSS Custom Properties
<blockquote className="caution">

__Alpha:__
Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.

</blockquote>


The `cssCustomProperties` property of the manifest lets you define [CSS custom properties (CSS variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) that Wix users can customize through the editor. Unlike [`cssProperties`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md), where keys must be standard CSS property names, `cssCustomProperties` lets you define your own variable names, giving you full control over how style values are applied to your component.

## Where to define

{/* TODO: when refElements are supported, add here */}
You can define `cssCustomProperties` in [`editorElement`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md) and in [`elements`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) of type `inlineElement`.

When a Wix user customizes your component, the editor sets these variables as CSS custom properties on the element. Your component's CSS must consume them using [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var). The connection between the manifest and the rendered styles flows through your CSS, so you decide which CSS properties each variable maps to, and you can use a single variable in multiple places or combine it with other values.

## CSS custom property item

`cssCustomProperties` is a map where each key is a variable name without the `--` prefix, such as `customBorder` or `iconColor`, and each value is a CSS custom property item. Every item must include a `cssPropertyType` field, which tells the editor what type of control to display for that variable.

<PropertyList bordered>
  <Property
    name="cssPropertyType"
    type="CssPropertyType"
    required
    description="The CSS data type or CSS property this variable represents."
  />
  <Property
    name="displayName"
    type="string"
    description="Label shown in the editor panel. Maximum 100 characters. Translatable."
  />
  <Property
    name="defaultValue"
    type="string"
    description="Initial CSS value shown in the design panel."
  />
  <Property
    name="statesDefaultValues"
    type="object"
    description={<>Default CSS values for defined <a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::c7e1ca18-6d99-4ca2-9cb2-002d9bdd58aa*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states">component.md states</a>.</>}
  />
  <Property
    name="disableEditing"
    type="boolean"
    description="Disables the ability to edit this CSS custom property item."
  />
  <Property
    name="customEnum"
    type="CustomEnum"
    description="Custom dropdown options with multiple style applications. Required when cssPropertyType is customEnum."
  >
    <ExpandableSection name="CustomEnum properties">
      <PropertyList>
        <Property
          name="cssPropertyType"
          type="CssPropertyType"
          description="The data type for the option values."
        />
        <Property
          name="options"
          type="CustomEnumOption[]"
          description="Array of options displayed in the editor dropdown. Maximum 100 items."
        >
          <ExpandableSection name="CustomEnumOption properties">
            <PropertyList>
              <Property
                name="value"
                type="string"
                description="Internal identifier stored when this option is selected. Maximum 100 characters."
              />
              <Property
                name="displayName"
                type="string"
                description="Label displayed to the user in the editor. Maximum 100 characters. Translatable."
              />
            </PropertyList>
          </ExpandableSection>
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="number"
    type="CssNumber"
    description="Numeric constraints including min, max, and multiplier. Only relevant when cssPropertyType is number."
  >
    <ExpandableSection name="CssNumber properties">
      <PropertyList>
        <Property name="min" type="string" description="Minimum value as a string of a decimal number." />
        <Property name="max" type="string" description="Maximum value as a string of a decimal number." />
        <Property name="multiplier" type="string" description="Step increment as a string of a decimal number." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  {/* Currently, only `drop_shadow` has a fully implemented design panel control. The other filter functions are valid schema values but don't yet render UI controls in the editor. You must include `drop_shadow` in your `filterFunctions` array for the filter section to appear in the design panel. */}
  <Property
    name="filter"
    type="Filter"
    description={<>Which <a href="fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md#filter-and-backdrop-filter">filter</a> effects to show in the editor panel. Only relevant for the filter property.</>}
  />
  <Property
    name="backdropFilter"
    type="BackdropFilter"
    description={<>Which <a href="fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md#filter-and-backdrop-filter">backdrop-filter</a> effects to show in the editor panel. Only relevant for the backdropFilter property.</>}
  />
  <Property
    name="display"
    type="Display"
    description={<>Which <a href="fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md#display">display</a> options to show in the editor panel. Only relevant for the display property.</>}
  />
  <Property
    name="writingMode"
    type="WritingMode"
    description={<>Which <a href="fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md#writing-mode">text direction</a> options to show in the editor panel. Only relevant for the writingMode property.</>}
  />
  <Property
    name="background"
    type="Background"
    description={<>Which <a href="fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md#background">background</a> options to show in the editor panel. Only relevant for the background property.</>}
  />
</PropertyList>

## CSS data types

Supported CSS data types:

- [`angle`](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)
- [`blendMode`](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode)
- [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
- `customEnum`
- [`length`](https://developer.mozilla.org/en-US/docs/Web/CSS/length)
- [`lengthPercentage`](https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage)
- [`number`](https://developer.mozilla.org/en-US/docs/Web/CSS/number)
- [`percentage`](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage)
- [`string`](https://developer.mozilla.org/en-US/docs/Web/CSS/string)
- [`time`](https://developer.mozilla.org/en-US/docs/Web/CSS/time)

## CSS property types

Supported property types.

**CSS data properties:**
- [`angle`](https://developer.mozilla.org/en-US/docs/Web/CSS/angle), [`blendMode`](https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode), `customEnum`, [`length`](https://developer.mozilla.org/en-US/docs/Web/CSS/length), [`lengthPercentage`](https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage), [`number`](https://developer.mozilla.org/en-US/docs/Web/CSS/number), [`percentage`](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage), [`string`](https://developer.mozilla.org/en-US/docs/Web/CSS/string), [`time`](https://developer.mozilla.org/en-US/docs/Web/CSS/time)

**Background properties:**
- [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background), [`backgroundAttachment`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment), [`backgroundClip`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip), [`backgroundColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color), [`backgroundImage`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image), [`backgroundOrigin`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin), [`backgroundPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position), [`backgroundRepeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat), [`backgroundSize`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)

**Margin properties:**
- [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin), [`marginBottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom), [`marginInlineEnd`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end), [`marginInlineStart`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start), [`marginLeft`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left), [`marginRight`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right), [`marginTop`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top)

**Padding properties:**
- [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding), [`paddingBottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom), [`paddingInlineEnd`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end), [`paddingInlineStart`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start), [`paddingLeft`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left), [`paddingRight`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right), [`paddingTop`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top)

**Border properties:**
- [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/border), [`borderBottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom), [`borderBottomColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color), [`borderBottomLeftRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius), [`borderBottomRightRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius), [`borderBottomStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style), [`borderBottomWidth`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width), [`borderColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color), [`borderEndEndRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius), [`borderEndStartRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius), [`borderInlineEnd`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end), [`borderInlineEndColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color), [`borderInlineEndStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style), [`borderInlineEndWidth`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width), [`borderInlineStart`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start), [`borderInlineStartColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color), [`borderInlineStartStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style), [`borderInlineStartWidth`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width), [`borderLeft`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left), [`borderLeftColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color), [`borderLeftStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style), [`borderLeftWidth`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width), [`borderRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius), [`borderRight`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right), [`borderRightColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color), [`borderRightStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style), [`borderRightWidth`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width), [`borderStartEndRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius), [`borderStartStartRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius), [`borderStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style), [`borderTop`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top), [`borderTopColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color), [`borderTopLeftRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius), [`borderTopRightRadius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius), [`borderTopStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style), [`borderTopWidth`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width), [`borderWidth`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)

**Font and text properties:**
- [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color), [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font), [`fontFamily`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family), [`fontSize`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), [`fontStretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch), [`fontStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style), [`fontVariant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant), [`fontWeight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight), [`letterSpacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing), [`lineHeight`](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height), [`textAlign`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align), [`textDecoration`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration), [`textDecorationColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color), [`textDecorationLine`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line), [`textDecorationStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style), [`textDecorationThickness`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness), [`textIndent`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent), [`textOverflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow), [`textShadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow), [`textTransform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform), [`writingMode`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)

**Layout and display properties:**
- [`alignItems`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items), [`alignSelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self), [`boxShadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow), [`columnGap`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap), [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display), [`flexDirection`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction), [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap), [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height), [`justifyContent`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content), [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity), [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow), [`rowGap`](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap), [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width)

**Effects properties:**
- [`backdropFilter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter), [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter), [`isolation`](https://developer.mozilla.org/en-US/docs/Web/CSS/isolation), [`mixBlendMode`](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode), [`objectFit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit), [`objectPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)

**SVG properties:**
- [`fill`](https://developer.mozilla.org/en-US/docs/Web/CSS/fill), [`fillOpacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/fill-opacity), [`stroke`](https://developer.mozilla.org/en-US/docs/Web/CSS/stroke), [`strokeOpacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/stroke-opacity), [`strokeWidth`](https://developer.mozilla.org/en-US/docs/Web/CSS/stroke-width)

## Examples

### Basic CSS custom properties

The following defines two CSS custom properties: `iconSize` for controlling icon dimensions, and `brandColor` for setting the primary brand color with an error state variant.

```typescript
editorElement: {
  cssCustomProperties: {
    iconSize: {
      cssPropertyType: 'length',
      displayName: 'Icon Size',
      defaultValue: '24px',
    },
    brandColor: {
      cssPropertyType: 'color',
      displayName: 'Brand Color',
      defaultValue: '#007bff',
      statesDefaultValues: {
        error: '#dc3545',
      },
    },
  },
}
```

The CSS custom properties defined in the manifest don't apply any styles on their own. Your component's CSS must consume these variables using `var()` to connect them to actual style rules:

```css
.icon {
  width: var(--iconSize, 24px);
  height: var(--iconSize, 24px);
}

.button {
  color: var(--brandColor, #007bff);
  border-color: var(--brandColor, #007bff);
}
```

### Custom enum

The following defines a custom enum that lets Wix users select an icon position relative to the button text using a dropdown in the editor.

```typescript
editorElement: {
  cssCustomProperties: {
    iconPosition: {
      cssPropertyType: 'customEnum',
      displayName: 'Icon Position',
      defaultValue: 'row',
      customEnum: {
        cssPropertyType: 'string',
        options: [
          { value: 'row', displayName: 'Before Text' },
          { value: 'row-reverse', displayName: 'After Text' },
          { value: 'column', displayName: 'Below Text' },
          { value: 'column-reverse', displayName: 'Above Text' },
        ],
      },
    },
  },
}
```

### CSS number with constraints

The following defines a numeric CSS custom property for controlling animation speed, with constraints that limit the value between 0 and 5 seconds in increments of 0.1.

```typescript
editorElement: {
  cssCustomProperties: {
    animationDuration: {
      cssPropertyType: 'number',
      displayName: 'Animation Speed',
      defaultValue: '0.3',
      number: {
        min: '0',
        max: '5',
        multiplier: '0.1',
      },
    },
  },
}
```

## See also

- [Standard CSS Properties](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/css/standard-css-properties.md)
- [About the Manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md)