Skip to main content
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

  1. Click the Edit tool in the bottom toolbar of the Canvas.
  2. Click on the design you want to edit. The CSS Editor panel opens docked to the side of the Canvas (on the right in VS Code, on the left in the desktop app).
You can also right-click a design and select Edit > Edit Design to start editing it.

​
Editor controls

Once the CSS Editor is open, click on any specific element within the design to select it. The panel populates with the element’s current styles, organized into the following sections. You can also double-click a text element inside the design to edit its content inline.
Controls typography properties for text elements.
  • Font family: Select the typeface from the dropdown.
  • Size: Set the font size in px.
  • Weight: Choose from available weights (e.g., Regular 400, Bold 700).
  • Line height: Control vertical spacing between lines.
  • Additional controls for style, color, letter spacing, alignment, and more.
Controls the element’s box model and flow.
  • Display: Set the layout mode (block, flex, grid, etc.).
  • Direction / Wrap: Set the flex direction and wrapping behavior.
  • Justify / Align: Control content distribution and item alignment.
  • Gap: Set spacing between child elements.
  • Box model: Adjust width, height, padding, and margin for each side.
Controls how the element is positioned.
  • Position: Set the positioning scheme (static, relative, absolute, fixed, sticky).
  • Inset: Offset the element from each side (top, right, bottom, left).
  • Z-index: Set the stacking order.
  • Float: Float the element within its container.
Controls the element’s background fill.
  • Type: Choose between Solid, Gradient, or Image fills.
  • Color: Pick a custom color or reuse colors already present in the document.
Controls the element’s border styling, configurable per side.
  • Color: Set the border color.
  • Style: Choose the border style (none, solid, dashed, etc.).
  • Width: Set the border thickness in px.
  • Radius: Set the corner radius.
Add depth and blur effects to the element.
  • Shadow: Create drop shadows or inner shadows.
  • Layer blur: Blur the element itself.
  • Backdrop blur: Blur the content behind the element.
Controls 2D transformations.
  • Translate: Move the element along the X and Y axes.
  • Rotate: Rotate the element.
  • Scale: Resize the element proportionally.
Attach a CSS animation to the element.
  • Preset: Select from available animation presets.
  • Duration: Set how long the animation runs.
  • Easing: Choose the easing function (e.g., ease-in-out, linear).
  • Delay / Iterations: Control when the animation starts and how many times it repeats.