> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/concepts-and-tools/modifiers.md).

# Modifiers

A modifier is a behaviour attached to a component that changes how it looks or acts without adding any content: a background image, a gradient, extra padding, an animation as it scrolls into view, or a rule about who can see it.

See modifiers on the demo site: <https://govcms.convivial.io/demo/modifiers>

![An image background modifier with an overlay](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-4b234ce1c6a099c1b726d9353e9825e333866e3e%2Fm-image-background-modifier.png?alt=media)

## How they work

Every component has a **Modifiers** field in its Presentation group. Add one with **Add Modifier**, choose the type, fill in its settings, and it applies to the whole component including everything inside it. A component can carry several — an image background, an overlay-friendly padding and a scroll reveal, say — and they are stored with the page like any other field.

Most modifiers take a **Media query**. Leave it empty to apply everywhere, or set one such as `(min-width: 768px)` to apply only on larger screens. Two modifiers of the same type, one with a query and one without, give different values for phones and desktops.

## Families

* **Backgrounds** — Colour Background, Custom Linear Gradient, Custom Radial Gradient, Image Background, Parallax Background, Video Background.
* **Space and shape** — Padding, Adaptive Height.
* **Motion** — Scroll Reveal, Colour Palette Swap. Both respect visitors who have asked their device for reduced motion.
* **Visibility** — Hide (optionally by screen size), Audience Visibility (by audience; see [Personalisation](/convivial-for-govcms/concepts-and-tools/personalisation.md)).

## When to use one

Use a palette, texture or pattern first; they are cheaper and always on-brand. Reach for a modifier when the design needs an actual image or video behind content, spacing the layout cannot give, or motion. Keep to one background per component and one animation per screen, and check the result on a phone — most regrets with modifiers are about small screens.

Every modifier's fields are listed in the [Modifier reference](/convivial-for-govcms/content-editing/components/modifier-reference.md).