> Markdown version of [Other Properties](https://vaadin.com/docs/latest/styling/themes/aura/other). Section index: [llms.txt](https://vaadin.com/docs/latest/styling/llms.txt)

# Aura: Other Properties

## <a id="density-sizing"></a>Density & Sizing

- `--aura-base-size`

  Defines the density of the UI. Aura redefines the base style [gap](https://vaadin.com/docs/latest/styling/themes/base.md#gap) and [padding](https://vaadin.com/docs/latest/styling/themes/base.md#padding) properties, and those values are computed based on this property. The property value is a number without a unit (i.e., *not* a CSS length value). The default is `16`, or `18` on devices with a coarse pointer, such as touch screens. Suitable values range from 12 to 24. The resulting `--vaadin-gap` and `--vaadin-padding` values are defined with the `px` unit and are rounded to nearest 1px. Prefer values divisible by 4 (i.e., 12, 16, 20, 24).

- `--aura-base-radius`

  Aura redefines the base style [radius](https://vaadin.com/docs/latest/styling/themes/base.md#radius) properties, and those values are computed based on this property. The property is a number without a unit (i.e., *not* a CSS length value). The default is `3`. Suitable values range from 0 to 10, depending on the `--aura-base-size` value.

  Setting the base radius to zero doesn’t make all corners square. If you wish to remove all rounded corners, override the [base style radius properties](https://vaadin.com/docs/latest/styling/themes/base.md#radius) directly.

## <a id="shadows"></a>Shadows

- `--aura-shadow-color`

  The color of shadows. By default computed from `--aura-background-color-light` and `--aura-background-color-dark`, so it differs between the light and dark color schemes. You can override it, but use the `light-dark()` function to keep both schemes working.

- `--aura-shadow-xs`

  Subtle shadow. Used for buttons and form inputs. The default is `0 1px 4px -2px var(--aura-shadow-color)`.

- `--aura-shadow-s`

  Small shadow. Used for small overlays like tooltips, cards, and filled component variants like primary buttons and checked checkboxes. The default is `0 2px 5px -1px var(--aura-shadow-color)`.

- `--aura-shadow-m`

  Prominent shadow. Used for most overlays like popovers, dialogs, and notifications. The default is `0 8px 16px -3px var(--aura-shadow-color)`.

## <a id="overlays"></a>Overlays

- `--aura-overlay-shadow`

  The default shadow for all overlays. Defaults to `--aura-shadow-m`.

- `--aura-overlay-outline-color`

  The outer border color of overlays. Mostly visible with a light color scheme. The default is color-scheme dependent, so use the `light-dark()` function if you override it.

- `--aura-overlay-inner-outline-color`

  The inner border color of overlays. Mostly visible with a dark color scheme. The default is computed from `--aura-contrast-level`.

- `--aura-overlay-backdrop-filter`

  The backdrop filter for all overlays. By default, it lightens and blurs the content behind overlays: `blur(20px) brightness(1.1) saturate(1.2)`. Only visible if `--aura-overlay-surface-opacity` is less than 1.

- `--aura-overlay-surface-opacity`

  Surface color opacity for overlay elements. The default is `0.85`.