To view the styling properties of your layers, you can select one or more layers in the layer list or highlight them directly on your canvas. Framer contains all of the styling properties you would expect from a modern design tool.
Framer X contains 4 different fill options to style your Frames. Solid, Linear Gradient, Radial Gradient and Image.
By default a Frame will be set to a solid fill with 50% opacity. You can open the color picker under the fill property. The color picker comes with an assortment of preset colors but you can always add your own by clicking the
Besides single use presets, colors can also be shared accross multiple elements like Frames and Text, be published to the Store and much more.Learn about Shared Colors ›
Gradients in Framer are based on the CSS Model. This means our gradients are simple and can be exported to the web without any differences.
Linear gradients are based on an angle and two color stops. Resizing a layer will not impact them because they will stay true to their angle and automatically adapt to the layer size.
Radial gradients are a bit less constrained but follow the same foundation. Instead of being driven by an angle, they are contained in an ellipse that can be of any size and can be moved anywhere in their layers.
Borders lets you add a border around any layer you create in Framer. You can control the color, width, and style of the border. Because Framer is web based, you’ll be able to set border styling and individual border size for the top, right, bottom, and left of the layer.
Multiple Shadows allow you to add more than one shadow to your desired layer. From outer to inner shadows, you can stack a combination of as many shadows as you want and customize them individually. Or right-click on any shadow and select
Duplicate to speed up your workflow. In Framer X, you can even animate individual shadows.
Effects in Framer adds an extra set of styling capabilites, including blending modes to blend layers and colors, object blur to blur an entire object, or background blur to blur the layers behind it. There are also filters like Contrast, Grayscale, Hue Rotate, Invert, Saturate and Sepia, for enhanced photo editing.