Styling

The Properties panel is where you can edit your layers and change their style properties.

You have a wide range of options and tools available to change the layer's fill, stroke, shadows and more.

Layer Opacity and Blending

You can use the numbers on your keyboard to adjust opacity. Number "2" gives you 20%, "5" gives you 50%, and "0" gives you 100%. If it’s already 100%, then it will change to 0% opacity.

To change the blend mode of an individual layer, click the Blending dropdown in the Layer section to the right and choose one of the available blend modes.

You can use one of the following effects:

  • Normal – no blending mode applied;
  • Darken – selects the darker of two colors;
  • Multiply – multiplies each pixel on the top layer by the pixels in the layers beneath;
  • Color burn – darkens the background color and increases the contrast;
  • Lighten – selects the lighter of two colors;
  • Screen – removes the black color and replaces it with a color fill;
  • Color dodge – lightens the background color to reflect the source color.
  • Overlay – combines Multiply on darker colors with Screen on lighter colors.
  • Soft light – applies a variant of Multiply on dark values and a variant of Screen on lighter values.
  • Hard light – combines Multiply on lighter colors with Screen on darker colors (opposite to Overlay).
  • Difference – takes the difference value between two colors (negative effect).
  • Exclusion – acts as Difference but similar colors result in lower contrast middle value.
  • Hue – applies the hue of the source layer to the luminance and saturation of the background color.
  • Saturation – applies the saturation of the source layer to the hue and luminance to the background color.
  • Color – applies the hue and saturation of the foreground to the luminance of the background.
  • Luminosity – applies the luminosity of the source color with the hue and saturation of the background color.

Text

The Typography section in the Properties panel has a number of options available to edit the text.

That's where you can change the font, size, color and the opacity of your text. You can bold, italicize or underline it. There's also the possibility to generate lorem ipsum.

Further, you can change it's alignment, spacing, convert it into a bulleted, numbered or unordered list.

Resizing Text

To resize a text element, you have to change the size manually by editing the text size value in the Properties panel. Resizing it on the canvas will not change it.

Fill

All color tools are in the Fill section in the Properties Panel. The Fill menu will only be shown when a relevant layer or element is selected.

Solid colors will have their HEX codes displayed. If you used a gradient on your design, the Fill section will display Gradient in the Fill section.

To change the color, click the Fill color square to open the Color picker.

Color Picker

You can change, view, and sample colors in the Color Picker. It shows the current color of a selected element - indicated by a white circle on the Hue, Saturation, Brightness (HSB) color model, and it's surrounded by related shades. Drag the circle around to get your desired color. To change the hue, or tone, click-and-drag the slider below the picker. Use the slider below to adjust opacity.

At the top of, you see the currently picked color's HEX code, next to it the heart icon adds the color to your favorites. And to its right, you have the eye dropper tool (Mac).

At the bottom you will see five icons. Starting from the left:

  • Favorite colors
  • Design library colors
  • HSB color model
  • Last used colors, solid colors, and gradients
  • Color schemes

Gradients

To apply a gradient fill to a layer, check the Gradient checkbox under the HSB color model. A Gradient bar will show up where you can click to add new points, select any of the points and drag to move them. Right under it you can choose the gradient type, Radial or Linear.

Stroke

To add a stroke, click the + button in the Stroke section. You’ll be able to further edit the following options:

  • color
  • type of stroke
  • size

You can set the different stroke size for the top, right, bottom, and left edge of the element by clicking the button beside the input field.

Shadows

There are 2 types of shadows in UXPin, Shadows which cast outside the element and Inner shadows which are rendered inside the elements.

To add shadows, it’s enough to click + button in the Shadows section. Next, you’ll be able to specify color, opacity, x and y offset, blur and spread.

The x and y offset determines the distance you want the shadow to be offset from the object while blur specifies the distance from the edge of the shadow where you want any blurring to occur.

Adding a spread will increase or decrease the size of the object casting the shadow. Please note that it’s possible for Rectangle, Oval and all form elements.

Blur

Blur allows for bringing the element out of focus. To add blur, first, click the + button. Then specify the radius to achieve the desired effect.

Please note that adding multiple shadow and blur effects may decrease the performance of the editor.

Note

Adding multiple shadow and blur effects may decrease the performance of the editor.

Image Fill

To insert a custom image as fill, click the + icon in the Image fill section and select Upload. Once you upload an image, you’ll see its preview and you’ll be able to position the image using the buttons next to it.

You can also specify the filling rules and choose from the following settings:

  • Stretch – the default option, the image is stretched to fit the layer’s height and width ratio.
  • Fit to fill – the image fills the height and width of its box. The aspect ratio is maintained but the image is usually cropped.
  • Contain – increases or decreases the size of the image to fill the box while preserving its aspect-ratio.
  • Don’t resize – image will ignore the height and width of the bounding box and retain its original size.

Custom CSS

You can style your elements using CSS. Click the + button to open the section and type in the CSS code.