Styling

Penpot has a variety of styling options for each object. When selected, the styling options are displayed in the design panel on the right.

Fill

Color fills can be added to artboards, shapes, texts and groups of layers. A fill can be a custom color (in Hex) or a color style from a library.

To apply a fill you can use the color picker, the color palette or a color styles.

You can also set the opacity for custom fill colors.

TIP: Select an element and press numbers from 0 to 9 to set their fill opacity. 1 to get 10%, 2 to get 20% and so on. You can set precise opacity by pressing two numbers consecutively in less than a second (for example 5 and 4 to set 54% opacity).

fills

You can add as many fills as you want to the same layer. This opens endless graphic possibilities like combining gradients and blending modes in the same element to create unique visual effects.

fills

Remove a Fill

To remove a fill from a selected object, press the “-” button in the fill section.

fills

Strokes

Strokes can be added to most of the objects at Penpot (rectangles, ellipses, artboards, curves and images).

stroke

Stroke options are:

  • Color and opacity
  • Width (in pixels)
  • Position - center, outside, inside
  • Style - solid, dotted, dashed, mixed

You can add as many strokes as you want to the same layer.

strokes

Stroke Caps

Ever needed an arrow to point something? You can style the ends of any open paths selecting different styles for each end of an open path.

stroke

The stroke caps options are:

  • Line arrow - An simple line arrow (two lines at 45º) with the same width as the stroke.
  • Triangle arrow - An solid arrowhead witht the shape of a triangle.
  • Square marker
  • Circle marker
  • Diamond marker
  • Round - Adds a round ending to the end of the path.
  • Square - Adds a rectangular ending to the end of the path.

stroke

Border radius

Border radius can be applied to rectangles and images to edit its corners. There’s also the option to edit each corner individually.

border radius

Shadow

Adding shadows is easy from the design panel. You can add as many as you want.

shadow

Shadow options are:

  • Type - Drop (outside the layer), inner (inside the layer)
  • Horizontal position (X)
  • Vertical position (Y)
  • Blur
  • Spread
  • Color and opacity

Blur

You can set a blur for each and every object at Penpot.

Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.

blur