Custom CSS

Custom CSS lets you add styles directly to an element using standard CSS syntax. Your styles are scoped to the element, so they won't leak to other parts of the page.

The & selector

Use & to target the element itself. This is similar to how Sass and CSS nesting work.

& {
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

The & gets replaced with a selector that targets your specific element, so your styles only apply to that element.

Pseudo-classes and pseudo-elements

You can use any CSS pseudo-class or pseudo-element:

&:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
 
&:focus {
  outline: 2px solid #3b82f6;
}
 
&::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1));
  pointer-events: none;
}

Note that hover, focus, and active states along with transitions and animations are stripped in the builder canvas. Use the Play button to preview them.

Media queries

You can use @media queries for responsive styles. The builder resolves these against the viewport width of the element's parent viewport, not the browser window.

& {
  font-size: 48px;
}
 
@media (max-width: 768px) {
  & {
    font-size: 24px;
  }
}

Keyframe animations

Define @keyframes and reference them in your styles:

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
 
& {
  animation: pulse 2s ease-in-out infinite;
}

CSS variables with @controls

You can add interactive UI controls that generate CSS custom properties. When you define @controls in a CSS comment block, each control's default value is injected as a CSS variable on the element.

/** @controls {
  radius: { type: "slider", label: "Radius", min: 0, max: 50, step: 1, default: 12, unit: "px" },
  glow: { type: "color", label: "Glow Color", default: "#3b82f6" }
} */
 
& {
  border-radius: var(--radius);
  box-shadow: 0 0 20px var(--glow);
}

This creates slider and color picker controls in the toolbar. When you adjust them, the CSS variable values update and the styles change in real time.

See Controls for all available control types.

Tips

• Avoid using !important unless necessary
• Test hover and transition effects using the Play button