> 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: Standard CSS Properties

## Article: Standard CSS Properties

## Article Link: 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

## Article Content:

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


# Standard CSS 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 `cssProperties` property of the manifest lets you define standard [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) that Wix users can customize through the editor. The editor reads these definitions and generates the appropriate design panel controls for each property. The key must be a valid CSS property name, such as `border`, `backgroundColor`, or `fontSize`. The editor applies the value directly to the element that matches the selector.

## Where to define

{/* TODO: when refElements are supported, add here */}
You can define `cssProperties` 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`.

## cssProperties compared to cssCustomProperties

The manifest supports two ways to define styling: `cssProperties` and [`cssCustomProperties`](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).

Use `cssProperties` when you want to apply a standard CSS property directly to an element. The editor maps the property to the appropriate design panel control automatically.

Consider [`cssCustomProperties`](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) instead when:
- You need a variable name that isn't a standard CSS property.
- The same value is used across multiple CSS rules.
- You want a custom dropdown with specific options.
- You need numeric values with min and max constraints.

## CSS property item

Each item defined under `cssProperties` accepts the following properties:

<PropertyList bordered>
  <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 property item."
  />
  <Property
    name="filter"
    type="Filter"
    description="Which filter effects to show in the editor panel. Only relevant for the filter property."
  >
    <ExpandableSection name="Filter properties">
      <PropertyList>
        <Property
          name="filterFunctions"
          type="FilterFunction[]"
          description="List of filter functions to expose to the user."
        >
          <ExpandableSection name="FilterFunction values">
            Supported <a href="fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/filter#syntax">CSS filter functions</a>:

            <PropertyList>
              <Property name="blur" description="Applies a Gaussian blur to the input image." />
              <Property name="brightness" description="Adjusts the brightness of the input image." />
              <Property name="contrast" description="Adjusts the contrast of the input image." />
              <Property name="drop_shadow" description="Applies a drop shadow effect to the input image." />
              <Property name="grayscale" description="Converts the input image to grayscale." />
              <Property name="hue_rotate" description="Applies a hue rotation to the input image." />
              <Property name="invert" description="Inverts the samples in the input image." />
              <Property name="opacity" description="Applies transparency to the input image." />
              <Property name="sepia" description="Converts the input image to sepia." />
              <Property name="saturate" description="Adjusts the saturation of the input image." />
            </PropertyList>
          </ExpandableSection>
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="backdropFilter"
    type="BackdropFilter"
    description="Which backdrop-filter effects to show in the editor panel. Only relevant for the backdropFilter property. Uses the same FilterFunction values as filter."
  />
  <Property
    name="display"
    type="Display"
    description="Which display options to show in the editor panel. Only relevant for the display property."
  >
    <ExpandableSection name="Display properties">
      <PropertyList>
        <Property
          name="displayValues"
          type="DisplayValue[]"
          description="List of display values to expose to the user."
        >
          <ExpandableSection name="DisplayValue options">
            Supported <a href="fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/display">CSS display</a> values:

            <PropertyList>
              <Property name="none" description="Removes the element from the layout." />
              <Property name="block" description="Generates a block element box." />
              <Property name="inline" description="Generates one or more inline element boxes." />
              <Property name="flow" description="Generates a block container with inline-level contents." />
              <Property name="flowRoot" description="Generates a block container with a new block formatting context." />
              <Property name="table" description="Behaves like a <table> element." />
              <Property name="flex" description="Generates a block-level flex container." />
              <Property name="grid" description="Generates a block-level grid container." />
              <Property name="list_item" description="Generates a block box for the content and a separate list-item inline box." />
              <Property name="contents" description="Makes the element's children participate in the parent's formatting context." />
              <Property name="inline_block" description="Generates a block element box that flows with surrounding content." />
              <Property name="inline_table" description="Behaves like an inline <table> element." />
              <Property name="inline_flex" description="Generates an inline-level flex container." />
              <Property name="inline_grid" description="Generates an inline-level grid container." />
            </PropertyList>
          </ExpandableSection>
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="writingMode"
    type="WritingMode"
    description="Which text direction options to show in the editor panel. Only relevant for the writingMode property."
  >
    <ExpandableSection name="WritingMode properties">
      <PropertyList>
        <Property
          name="writingModeValues"
          type="WritingModeValue[]"
          description="List of writing-mode values to expose to users."
        >
          <ExpandableSection name="WritingModeValue options">
            Supported <a href="fallback::https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">CSS writing-mode</a> values:

            <PropertyList>
              <Property name="horizontalTb" description="Text flows horizontally from left to right, top to bottom." />
              <Property name="verticalRl" description="Text flows vertically from top to bottom, right to left." />
              <Property name="verticalLr" description="Text flows vertically from top to bottom, left to right." />
              <Property name="sidewaysRl" description="Text flows vertically from top to bottom, right to left, with characters rotated 90° clockwise." />
              <Property name="sidewaysLr" description="Text flows vertically from top to bottom, left to right, with characters rotated 90° counterclockwise." />
            </PropertyList>
          </ExpandableSection>
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="background"
    type="Background"
    description="Which background options to show in the editor panel. Only relevant for the background property."
  >
    <ExpandableSection name="Background properties">
      <PropertyList>
        <Property
          name="imageCategory"
          type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::7ce7bbd4-3fcc-4c44-a19b-afd2d91c82f4#imagecategorytypes*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/media.md#imagecategorytypes">ImageCategoryTypes</a></>}
          description="Which image media manager category to open when the Wix user selects a background."
        />
        <Property
          name="vectorArtCategory"
          type={<><a href="portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::7ce7bbd4-3fcc-4c44-a19b-afd2d91c82f4#vectorartcategorytypes*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/data/data-types/media.md#vectorartcategorytypes">VectorArtCategoryTypes</a></>}
          description="Which shape divider media manager category to open when the Wix user selects a background."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

## CSS shorthand

[CSS shorthand properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shorthand_properties) allow you to set multiple related CSS properties with a single declaration. When you define a shorthand property in the manifest, the editor panel displays separate controls for the core related properties.

<PropertyList bordered>
  <Property
    name="border"
    type="shorthand"
    description="Defines all border-related properties for all sides. Includes borderWidth, borderStyle, borderColor, and all directional variants."
  />
  <Property
    name="background"
    type="shorthand"
    description="Sets all background-related properties: backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, backgroundClip, backgroundOrigin, backgroundAttachment."
  />
  <Property
    name="margin"
    type="shorthand"
    description="Controls spacing outside the element on all sides: marginTop, marginRight, marginBottom, marginLeft, marginInlineStart, marginInlineEnd."
  />
  <Property
    name="padding"
    type="shorthand"
    description="Controls internal spacing inside the element: paddingTop, paddingRight, paddingBottom, paddingLeft, paddingInlineStart, paddingInlineEnd."
  />
  <Property
    name="font"
    type="shorthand"
    description="Sets all font-related properties: fontFamily, fontSize, fontWeight, fontStyle, fontVariant, fontStretch, lineHeight."
  />
  <Property
    name="textDecoration"
    type="shorthand"
    description="Defines all aspects of text decoration: textDecorationLine, textDecorationColor, textDecorationStyle, textDecorationThickness."
  />
  <Property
    name="borderRadius"
    type="shorthand"
    description="Sets corner rounding for all corners: borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, and logical equivalents."
  />
</PropertyList>

## Examples

### Basic CSS property with state defaults

The following defines a `border` property with a dashed green default and a solid red override for the error state.

```typescript
editorElement: {
  cssProperties: {
    border: {
      displayName: 'Main component Border',
      defaultValue: 'dashed 2px green',
      statesDefaultValues: {
        error: 'solid 2px red',
      },
    },
  },
}
```

### Empty object CSS properties

You can define a CSS property with an empty object to enable it with default editor behavior.

```typescript
editorElement: {
  cssProperties: {
    backgroundColor: {},
    border: {},
    padding: {},
  },
}
```

### CSS shorthand

When you define a shorthand property like `border`, the editor displays separate controls for color, width, and style for all directional variants.

```typescript
editorElement: {
  cssProperties: {
    border: {
      displayName: 'Border',
      defaultValue: '2px solid blue',
    },
  },
}
```

### Filter and backdrop filter

The following defines a `filter` property with blur, drop shadow, and contrast effects, and a `backdropFilter` with blur, brightness, and saturation effects.

```typescript
editorElement: {
  cssProperties: {
    filter: {
      displayName: 'Image Effects',
      filter: {
        filterFunctions: ['blur', 'drop_shadow', 'contrast'],
      },
    },
    backdropFilter: {
      displayName: 'Backdrop Effects',
      backdropFilter: {
        filterFunctions: ['blur', 'brightness', 'saturate'],
      },
    },
  },
}
```

### Display

The following defines a `display` property that lets Wix users choose between none, flex, and block layouts.

```typescript
editorElement: {
  cssProperties: {
    display: {
      displayName: 'Layout Type',
      defaultValue: 'flex',
      display: {
        displayValues: ['none', 'flex', 'block'],
      },
    },
  },
}
```

### Writing mode

The following defines a `writingMode` property that lets Wix users choose between horizontal and vertical text directions.

```typescript
editorElement: {
  cssProperties: {
    writingMode: {
      displayName: 'Text Direction',
      defaultValue: 'horizontalTb',
      writingMode: {
        writingModeValues: ['horizontalTb', 'verticalRl', 'verticalLr'],
      },
    },
  },
}
```

### Background

The following defines a `background` property that opens the image media manager when a Wix user selects a background.

```typescript
editorElement: {
  cssProperties: {
    background: {
      displayName: 'Background',
      background: {
        imageCategory: 'IMAGE_BACKGROUND',
      },
    },
  },
}
```

## See also

- [CSS Custom Properties](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)
- [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)