You can customize the appearance of any element in Instant using various styling options. These controls allow you to adjust colors, borders, shadows, and more to match your design needs.
Overview
Style options give you control over how elements look visually. From simple background colors to advanced effects like blur and blending, these settings help you create polished, professional designs.
Available Style Options
Option | What It Does |
Fill Color | Sets the background color of an element |
Border | Adds a frame around an element |
Corner Radius | Rounds the corners of an element |
Rotation | Rotates an element by a specified degree |
Shadows | Adds depth with outer or inner shadows |
Opacity | Controls transparency of an element |
Fill Color
Apply a solid fill color to an element's background.
Common Uses
Adding contrast between sections
Highlighting important areas
Visually separating different parts of your layout
Creating branded color blocks
Border
Add a border to frame an element.
Border Settings
Setting | Description |
Thickness | The width of the border in pixels |
Color | The color of the border |
Style | The border pattern (solid, dashed, etc.) |
Corner Radius
Round the corners of an element using the radius setting.
Configuration Options
Option | Description |
Linked | Apply the same radius value to all four corners |
Individual | Set different radius values for each corner |
The radius value is measured in pixels. Higher values create more curved corners.
Common Values
Radius | Result |
0px | Sharp, square corners |
4px | Subtle rounding |
8px | Moderate rounding |
16px | Noticeable rounded corners |
50% | Fully circular (on square elements) |
Rotation
Rotate an element to create dynamic layouts or emphasize certain items.
How It Works
Specify the degree of rotation to tilt the element. Positive values rotate clockwise, negative values rotate counter-clockwise.
Rotation | Effect |
0° | No rotation (default) |
45° | Diagonal tilt |
90° | Quarter turn |
180° | Upside down |
Shadows
Add shadows to create depth and visual separation between elements.
Shadow Types
Type | Description |
Outer Shadow | Appears outside the element's edges, creating a lifted effect |
Inner Shadow | Appears inside the element, creating a recessed or inset effect |
Shadow Settings
Offset — How far the shadow extends from the element
Blur — How soft or sharp the shadow edges appear
Spread — How much the shadow expands beyond the offset
Color — The shadow color (often a semi-transparent black)
Opacity
Control the transparency of an element by adjusting its opacity.
How It Works
Opacity | Result |
100% | Fully visible (no transparency) |
75% | Slightly transparent |
50% | Half transparent |
25% | Mostly transparent |
0% | Completely invisible |
Common Uses
Softening visual impact
Creating layering effects
Allowing background elements to show through
Creating overlay effects
Advanced Style Options
Click the Add Property button to access additional styling options. These advanced effects can enhance the look of your element and create unique visual interactions.
Blending
Apply a blending filter to a container (such as a row or column). The blend mode affects how the container visually interacts with content behind it.
Available Blend Modes
Blend Mode | Effect |
Normal | No blending effect (default) |
Darken | Shows only the darker colors between layers |
Multiply | Multiplies colors, creating a darker result |
Color Burn | Darkens the background to reflect the element's color |
Lighten | Shows only the lighter colors between layers |
Screen | Lightens by inverting, multiplying, and inverting again |
Plus Lighter | Adds color values for a brightening effect |
Color Dodge | Brightens the background to reflect the element's color |
Overlay | Combines Multiply and Screen based on background color |
Soft Light | Subtle darkening or lightening similar to diffused light |
Hard Light | Intense darkening or lightening similar to harsh light |
Difference | Subtracts colors for high-contrast results |
Exclusion | Similar to Difference but with lower contrast |
Hue | Applies the element's hue to the background |
Saturation | Applies the element's saturation to the background |
Color | Applies both hue and saturation to the background |
Luminosity | Applies the element's brightness to the background |
Blur
Apply a blur effect directly to the selected layer. This softens the element itself.
Setting | Description |
Strength | Controls how much blur is applied (higher = more blurred) |
Fill Blur (Background Blur)
Blur the layout that falls behind the selected element. This creates the popular frosted glass effect.
How to Create a Glass Effect
Place a row or column container on top of an image
Apply Fill Blur to the container
Set the container's fill color to white (or any color)
Reduce the fill opacity to around 40%
The result is a translucent container with the image behind it appearing blurred—the signature glass effect used in modern UI design.
Important: Fill blur only works if the element's fill color has less than 100% opacity. The transparency allows the blurred background to show through.
Greyscale
Convert your element to greyscale based on a percentage value.
Percentage | Result |
0% | Full color (no greyscale) |
50% | Partially desaturated |
100% | Completely greyscale |
This allows you to turn any colored layout into a monochromatic version with fine control over the intensity.
Invert
Invert the colors of the selected element, flipping all colors to their opposites.
Original | Inverted |
White | Black |
Black | White |
Colors | Complementary colors |
This creates a high-contrast, dramatic visual effect useful for specific design purposes or accessibility features.
Quick Reference
Task | Location |
Set fill color | Right sidebar → Style → Fill |
Add border | Right sidebar → Style → Border |
Round corners | Right sidebar → Style → Radius |
Rotate element | Right sidebar → Style → Rotation |
Add shadow | Right sidebar → Style → Shadow |
Adjust opacity | Right sidebar → Style → Opacity |
Add advanced effects | Right sidebar → Style → Add Property |
Style Options Summary
Option | Type | Common Use |
Fill Color | Basic | Background colors, sections |
Border | Basic | Framing, separation, emphasis |
Corner Radius | Basic | Buttons, cards, images |
Rotation | Basic | Dynamic layouts, decorative elements |
Shadows | Basic | Depth, elevation, focus |
Opacity | Basic | Overlays, layering, fading |
Blending | Advanced | Creative color interactions |
Blur | Advanced | Softening, focus effects |
Fill Blur | Advanced | Frosted glass, overlays |
Greyscale | Advanced | Muted styling, hover states |
Invert | Advanced | High contrast, accessibility |