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.
Fill Color
You can apply a solid fill color to an element’s background. This is useful for adding contrast, highlighting sections, or visually separating different parts of your layout.
Border
Borders can be added to frame an element. You can set the border’s thickness, color, and style (such as solid or dashed) to suit your design.
Corner Radius
Use the radius setting to round the corners of an element.
If you choose rounded corners, you can define how curved each corner should be by adjusting the radius value (in pixels).
You can also choose whether to apply the same radius to all four corners or set individual values for each corner for more control.
Rotation
Elements can be rotated to create dynamic layouts or emphasize certain items. The rotation setting lets you specify the degree of rotation.
Shadows
You can add shadows to create depth and separation between elements.
Choose between outer shadows, which appear outside the element’s edges, or inner shadows, which give a recessed effect.
Opacity
Lowering an element’s opacity makes it more transparent, allowing elements behind it to show through. This can be used to soften visual impact or create layering effects.
Adding more styling options
By clicking the Add Property button, you unlock several advanced styling options that can enhance the look of your element. Here are some of the available options:
Blending
Add dynamic blending effects to your element. Choose from a variety of styles, such as Exclusion, Difference, Lighten, Hue, Saturation, and more, to create unique visual interactions between your element and its background.
Blur
Apply a blur effect to your element. You can control the strength of the blur, allowing for subtle or more pronounced visual softening depending on your design needs.
Fill Blur
Also known as background blur, this effect blurs the elements behind the selected element based on the strength you define. This feature is particularly effective when you want to focus on a specific element while keeping the background slightly out of focus. Note: This effect only works if the fill color has less than 100% opacity.
Greyscale
Convert your element to greyscale, removing color to create a monochromatic design. This effect can help in emphasizing other elements on the page or providing a neutral look.
Invert
Invert the colors of your selected element. This effect flips the colors, creating a high-contrast and often dramatic visual effect that can be used for specific design purposes.