penpot/docs/user-guide/styling/index.njk

---
title: 06· Styling
---

<h1 id="styling">Styling</h1>
<p class="main-paragraph">Penpot has a variety of styling options for each object. When selected, the styling options are displayed in the design panel on the right.</p>

<h2 id="fill">Color fills</h2>
<p>Color fills can be added to boards, shapes, texts and groups of layers.</p> 
<p>You can add as fills:</p> 
<ul>
  <li>Custom colors (hex).</li>
  <li>Color <a href="/user-guide/libraries/#asset-types">assets</a>.</li>
  <li>Images.</li>
</ul>
<p>To apply a fill you can use: the color picker, the color palette or a color style.</p>
<ul>
  <li>The <a href="/user-guide/styling/#color-picker">color picker</a>.</li>
  <li>The <a href="/user-guide/styling/#color-palette">color palette</a>.</li>
  <li>The <a href="/user-guide/libraries/">assets library</a>.</li>
</ul>
<figure>
  <video muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-library.webp" height="auto">
    <source src="/img/styling/color-library.mp4" type="video/mp4">
  </video>
  <figcaption>Adding color fills from the assets library</figcaption>
</figure>
<p>You can also set the <strong>opacity</strong> for custom fill colors.</p>
<p><strong>TIP:</strong> 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).</p>
<figure>
  <video title="Change opacity" muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-opacity.webp" height="auto">
    <source src="/img/styling/color-opacity.mp4" type="video/mp4">
  </video>
</figure>
<p>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.</p>
<figure>
  <img alt="Multiple fills" src="/img/styling/fill-multiple.webp"/>
</figure>

<h3>Remove a fill</h3>
<p>To <strong>remove a fill</strong> from a selected object, press the “-” button in the fill section.</p>
<figure>
  <img alt="Multiple fills" src="/img/styling/fill-remove.webp"/>
</figure>

<h2 id="color-picker">Color picker</h2>
<p>Here you have the anatomy of the color picker:</p>
<figure>
  <img alt="Color picker" src="/img/styling/color-picker.webp"/>
</figure>
<ol>
  <li><strong>Eyedropper</strong> - Allows you to pick any color of the objects at the viewport.</li>
  <li><strong>Color profiles</strong> - Select between RGB, the Harmony Wheel or HSV.</li>
  <li><strong>Color type</strong> - Solid, linear gradient, radial gradient or image.</li>
  <li><strong>Sliders</strong> - Easily manage settings like brightness, saturation or opacity.</li>
  <li><strong>Values</strong> - Set precise color values of red(R), green(G), blue(B) and transparency(A).</li>
  <li><strong>Libraries</strong> - Switch between recent colors and libraries.</li>
  <li><strong>Color palette</strong> - A quick launcher of the palette with the selected library.</li>
</ol>

<h2 id="color-palette">Color palette</h2>
<p>The color palette allows you to have a selected color library in plain sight.</p>
<figure>
  <video title="color palette" muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-palette.webp" height="auto">
    <source src="/img/styling/color-palette.mp4" type="video/mp4">
  </video>
</figure>
<p>There are three ways to show/hide the color palette:</p>
<ol>
  <li>From the <strong>main menu</strong> at the top left navbar.</li>
  <li>Pressing the color palette button the <strong>toolbar</strong>.</li>
  <li>Using the color palette <strong>launcher</strong> at the color picker (see previous section).</li>
</ol>
<p>Use the <strong>menu</strong> to easily switch between libraries.</p>
<p>Switch between big and small <strong>thumbnails sizes</strong>.</p>

<h3 id="color-palette">Applying color from the palette</h3>
<ul>
  <li><strong>Apply color to fill:</strong> Just select the shape and click on the preferred bullet in the color palette.</li>
  <li><strong>Apply color to stroke:</strong>  Press <kbd>Alt</kbd> (or <kbd>⌥</kbd> in mac OS) while clicking.</li>
</ul>

<h2 id="selected-colors">Selected colors</h2>
<p>All of the colors that are contained within a selection of objects are showcased at the sidebar so you can play with the colors of a group without the hassles of individual selection.</p>
<figure>
  <img alt="Selected colors" src="/img/styling/color-selected.webp"/>
</figure>

<h2 id="strokes">Strokes</h2>
<p>Strokes can be added to most of the objects at Penpot (rectangles, ellipses, boards, curves and images).</p>
<figure>
  <video title="strokes" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke.webp" height="auto">
    <source src="/img/styling/stroke.mp4" type="video/mp4">
  </video>
</figure>
<p>Stroke options are:</p>
<ul>
  <li><strong>Color and opacity</strong></li>
  <li><strong>Width</strong> (in pixels)</li>
  <li><strong>Position</strong> - center, outside, inside</li>
  <li><strong>Style</strong> - solid, dotted, dashed, mixed</li>
</ul>
<p>You can add as many strokes as you want to the same layer.</p>
<figure>
  <img alt="Multiple strokes" src="/img/styling/stroke-multiple.webp"/>
</figure>

<h2 id="stroke-caps">Stroke Caps</h2>
<p>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.</p>
<figure>
  <video title="Stroke cap" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke-cap.webp" height="auto">
    <source src="/img/styling/stroke-cap.mp4" type="video/mp4">
  </video>
</figure>

<p>The stroke caps options are:</p>
<ul>
  <li><strong>Line arrow</strong> -  A simple line arrow (two lines at 45º) with the same width as the stroke.</li>
  <li><strong>Triangle arrow</strong> - A solid arrowhead with the shape of a triangle.</li>
  <li><strong>Square marker</strong></li>
  <li><strong>Circle marker</strong></li>
  <li><strong>Diamond marker</strong></li>
  <li><strong>Round</strong> - Adds a round ending to the end of the path.</li>
  <li><strong>Square</strong> - Adds a rectangular ending to the end of the path.</li>
</ul>

<h2 id="radius">Corner radius</h2>
<p>You can set values for corner radius to rectangles and images. There’s also the option to edit each corner individually.</p>
<figure>
  <video title="Corner radius" muted="" playsinline="" controls="" width="100%" poster="/img/styling/corners.webp" height="auto">
    <source src="/img/styling/corners.mp4" type="video/mp4">
  </video>
</figure>


<h2 id="shadow">Shadow</h2>
<p>Adding shadows is easy from the design panel. You can add as many as you want.</p>
<figure>
  <img alt="Layer shadows" src="/img/styling/shadow.webp"/>
</figure>
<p>Shadow options are:</p>
<ul>
  <li><strong>Type</strong> - Drop (outside the layer), inner (inside the layer)</li>
  <li><strong>Horizontal position</strong> (X)</li>
  <li><strong>Vertical position</strong> (Y)</li>
  <li><strong>Blur</strong></li>
  <li><strong>Spread</strong></li>
  <li><strong>Color and opacity</strong></li>
</ul>

<h2 id="blur">Blur</h2>
<p>You can set a blur for each and every object at Penpot.</p>
<p><strong></strong>Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.</p>
<figure>
  <video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/blur.webp" height="auto">
    <source src="/img/styling/blur.mp4" type="video/mp4">
  </video>
</figure>

<h2 id="blend">Opacity and blend</h2>
<p>Set the overal opacity for layers and their blend mode.</p> 
<p>Blend allows you to control how a layer interacts with the layers beneath it, determining how pixels from the current layer are combined with pixels in the underlying layers. Use blend to achive various effects, such as shading, highlights, or creative visual styles.</p>
<figure>
  <img alt="Layer blend and opacity" src="/img/styling/blend-opacity.webp"/>
</figure>
<p>Blend options available:</p>
<ul>
  <li><strong>Normal</strong></li>
  <li><strong>Darken</strong></li>
  <li><strong>Multiply</strong></li>
  <li><strong>Color burn</strong></li>
  <li><strong>Lighten</strong></li>
  <li><strong>Screen</strong></li>
  <li><strong>Color dodge</strong></li>
  <li><strong>Overlay</strong></li>
  <li><strong>Soft light</strong></li>
  <li><strong>Hard light</strong></li>
  <li><strong>Difference</strong></li>
  <li><strong>Exclusion</strong></li>
  <li><strong>Hue</strong></li>
  <li><strong>Saturation</strong></li>
  <li><strong>Color</strong></li>
  <li><strong>Luminosity</strong></li>
</ul>