Form Container Styling
The form container is the main box that holds your form content. Here’s everything you can customize about it.
Properties
Width
Set the width of the form container, from 320px (narrow) to 960px (wide). Narrower forms feel more focused, wider forms let you use side-by-side layouts more effectively.
Text color
The main text color used for labels, descriptions, and headings throughout the form.
Accent color
The color used for interactive elements — buttons, selected options, focus rings, and links. Pick something that stands out against your background.
Background color
The background color of the form container itself. This sits on top of the page background.
Rounded corners
Controls how rounded the corners of the form container are. Range: 0px (sharp corners) to 100px (very rounded).
Border
Add a border around the form container. You can set:
- Width — how thick the border is
- Style — solid, dashed, dotted, etc.
- Color — any color you want
Background blur
Add a frosted-glass blur effect to the form container background. Range: 0px to 32px. Looks great when you have a colorful page background showing through a semi-transparent container.
Background shadow
Add a drop shadow behind the form container for depth. Configure:
- Color — shadow color (often a dark, semi-transparent color)
- X/Y offset — how far the shadow shifts
- Blur — how soft the shadow edge is
- Spread — how far the shadow extends