Back to Docs

Styling & Options

The Styling Panel

Select any element and open the Styling tab to access:

  • Layout — Display, Flexbox/Grid settings, width, height
  • Spacing — Margin and padding with per-side control
  • Background — Colours, gradients, images, video
  • Border — Width, style, colour, radius
  • Shadow — Box shadow and text shadow
  • Typography — Font family, size, weight, line-height, letter-spacing, colour
  • Transform — Translate, rotate, scale, skew
  • Transition — Animate property changes

Pseudo-states

Style elements differently on hover, focus, and active states. Click the state toggle at the top of the styling panel.

CSS Units

RAVENCIBuilder supports px, em, rem, %, vw, vh, and auto. Click the unit label next to any numeric input to cycle through options.

Custom CSS

For anything the visual controls don't cover, use the Custom CSS field in the Advanced tab. Write CSS scoped to the selected element using the selector placeholder:

selector {
  backdrop-filter: blur(10px);
}
selector:hover {
  transform: scale(1.02);
}