Skip to main content
Design mode is currently in alpha. Please contact us at support@kombai.com to get access.
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, you can also 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, or right.
  • Vertical alignment: Align text to the 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 the background color by hex value and 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).