Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.kombai.com/llms.txt

Use this file to discover all available pages before exploring further.

Design Mode is currently in beta. For feedback, please contact us at support@kombai.com.
The CSS Editor is a visual style editor built into the Canvas. It lets you select any element within a design and directly adjust its CSS properties.

​
Open the CSS Editor

There are two ways to open the CSS Editor:
  • From the left toolbar: Click the icon. The CSS Editor sidebar will open on the right.
  • From the top toolbar: Select a design, click on Edit in the top toolbar, and select Edit design.

​
Editor controls

Once the CSS Editor is open, click on any specific element within the design to select it. The sidebar will populate with the element’s text and current styles, organized into the following sections:
Edit the existing text content of the selected element.
Controls typography properties for text elements.
  • Font family: Select the typeface from the dropdown.
  • Font weight: Choose from available weights (e.g., Regular 400, Bold 700).
  • Font size: Set the size in px.
  • Style toggles: Apply Bold, Italic, Underline, or Strikethrough.
  • Color: Set the text color type (Solid, Gradient, etc.), hex value, and opacity.
  • Line height: Control vertical spacing between lines.
  • Letter spacing: Adjust spacing between characters.
  • Text alignment: Align text left, center, right, top, middle, or bottom of its container.
  • Transform: Set capitalization: Sentence case (Ab), Title case (Aa), Uppercase (AA), or Lowercase (aa).
  • Truncate with ellipsis: Clip overflowing text with an ellipsis.
Controls the visual surface properties of the element.
  • Opacity: Set the element’s overall transparency as a percentage.
  • Corner radius: Set the border radius in px.
Controls the element’s position within the canvas.
  • X: Set the horizontal offset.
  • Y: Set the vertical offset.
  • Z: Set the Z-index / stacking order.
Controls the element’s size, flow, and spacing model.
  • Flow: Set the layout mode using the icon toggles (freeform, column, row, and grid).
  • Dimensions: Set the element’s width and height in px.
  • Min/Max Width and Height: Constrain the element’s size range.
  • Padding: Set inner spacing on each side.
  • Clip content: Toggle whether content overflowing the element’s bounds is clipped.
  • Margin: Set outer spacing on each side.
  • Border box: Toggle whether padding and borders are included in the element’s declared dimensions.
Controls the element’s background fill.
  • Type: Choose fill type (Solid, Gradient, etc.).
  • Color: Set custom background colors or use existing design tokens and adjust opacity.
Controls the element’s border styling.
  • Color: Set border color type, hex value, and opacity.
  • Style: Choose border style (None, Solid, Dashed, etc.).
  • Width: Set border thickness in px.
Add drop shadows or blur effects to the element. Click Add to create a new effect, then use the dropdown to choose the type (Drop shadow, Inner shadow, Layer Blur, Backdrop Blur).
Attach a CSS animation to the element. Click Add to configure one.
  • Animation name: Select from available animation presets.
  • Duration: Set how long the animation runs, in seconds.
  • Delay: Set how long to wait before the animation starts, in seconds.
  • Timing: Choose the easing function (e.g., ease-in-out, linear).
  • Iteration count: Set how many times the animation repeats (or ∞ for infinite).