Fills, Strokes & Effects

Every shape you create in Piko can be styled with fills, strokes, and effects. You can stack multiple fill and stroke layers, blend them together, and add shadows or blurs — all non-destructively. This guide covers every paint type, blending option, and effect available in the editor.

Paint types

Piko supports five paint types that you can use for both fills and strokes. Switch between them using the paint type buttons in the fill or stroke popup.

Solid

A single uniform RGBA color. The simplest and most common paint type.

Linear Gradient

A directional gradient that blends between colors along a straight line between two points.

Radial Gradient

A circular gradient that radiates outward from a center point.

Angular Gradient

A conic (sweep) gradient that rotates around a center point, similar to a color wheel.

Diamond Gradient

A diamond-shaped gradient that radiates in a diamond pattern from the center.

Tip

You can switch between paint types at any time without losing your color settings. If you change a gradient to a solid, the first gradient stop’s color is used. Switching back restores the gradient.

Fill layers

Shapes in Piko can have multiple fill layers stacked on top of each other. This lets you combine solid colors and gradients in a single shape without needing to duplicate it.

Adding a fill

1. Select a shape on the canvas.
2. In the Properties panel, find the Fill section.
3. Click the + button to add a new fill layer.
4. Choose a paint type and configure the color or gradient.

Fill layer properties

Each fill layer has its own independent settings:

Property	Description
Paint type	Solid, linear gradient, radial gradient, angular gradient, or diamond gradient.
Opacity	Transparency of this fill layer (0 = fully transparent, 1 = fully opaque).
Visibility	Toggle the eye icon to show or hide a fill layer without removing it.
Blend mode	Controls how this fill layer blends with the layers below it.

Note

Fill layers render from bottom to top. The bottom fill in the list is drawn first, and each subsequent fill is painted on top. Drag fills to reorder them.

Stroke layers

Like fills, shapes can have multiple stroke layers. Each stroke layer outlines the shape independently, so you can create effects like double borders or combine a thin inner stroke with a thick outer one.

Adding a stroke

1. Select a shape on the canvas.
2. In the Properties panel, find the Stroke section.
3. Click the + button to add a new stroke layer.
4. Set the stroke color, width, and alignment.

Stroke layer properties

Stroke layers share the same paint type, opacity, visibility, and blend mode settings as fill layers, plus these additional options:

Property	Description
Width	Stroke thickness in pixels.
Alignment	Where the stroke sits relative to the path: Center (straddles the edge), Inside (drawn inward), or Outside (drawn outward).

Tip

Inside and outside alignment are especially useful for shapes with precise dimensions. An inside stroke does not increase the shape’s bounding box, while a center stroke extends half its width beyond the shape edge.

Blend modes

Blend modes control how a fill or stroke layer’s colors interact with the content beneath it. Piko supports 16 blend modes organized into five categories.

Standard

Mode	Description
Normal	Default mode. The layer fully covers content below based on its opacity.
Multiply	Multiplies color values, producing a darker result. Useful for shadows and tinting.
Screen	Inverts and multiplies, producing a brighter result. Great for highlights and glow effects.
Overlay	Combines Multiply and Screen — darkens dark areas and lightens light areas.

Darken

Mode	Description
Darken	Keeps the darker pixel from either layer.
Color Burn	Darkens the base color to increase contrast, producing rich, saturated results.

Lighten

Mode	Description
Lighten	Keeps the lighter pixel from either layer.
Color Dodge	Brightens the base to decrease contrast, creating intense highlights.

Contrast

Mode	Description
Hard Light	Similar to Overlay but more intense. The blend layer acts as a strong light source.
Soft Light	A gentler version of Overlay. Good for subtle lighting and color adjustments.

Component

Mode	Description
Difference	Subtracts the darker color from the lighter, producing inverted and high-contrast effects.
Exclusion	Similar to Difference but with lower contrast. Gray values produce gray.
Hue	Applies the hue of the blend layer while preserving the saturation and luminosity of the base.
Saturation	Applies the saturation of the blend layer while preserving the hue and luminosity of the base.
Color	Applies the hue and saturation of the blend layer while preserving the luminosity of the base.
Luminosity	Applies the luminosity of the blend layer while preserving the hue and saturation of the base.

Gradients

Gradients let you blend smoothly between multiple colors. They are available for both fills and strokes and can be edited directly on the canvas.

Editing a gradient on canvas

1. Select a shape that has a gradient fill or stroke.
2. Click the gradient preview in the Properties panel to enter gradient editing mode.
3. Drag the start and end handles on the canvas to control the gradient’s direction and length.
4. Click on a color stop (the small circles along the gradient bar) to select it and change its color.
5. Click anywhere along the gradient bar to add a new color stop.
6. Drag a color stop away from the bar to remove it.

Gradient properties

Property	Description
Color stops	Each gradient can have unlimited color stops. Every stop has an RGBA color and an offset position from 0 (start) to 1 (end).
Default linear	A new linear gradient runs horizontally from left to right across the shape.
Default radial	A new radial gradient radiates from the center of the shape to its right edge.

Tip

For precise control, you can type exact offset values for each color stop in the Properties panel instead of dragging on canvas.

Foreground and background colors

Piko maintains a foreground and background color pair, shown as two overlapping squares at the bottom of the toolbar.

• The foreground color is used by paint tools like the Brush, Fill, and Pen tools.
• The background color is used as a secondary color and for certain operations like canvas clearing.
• Press X to swap the foreground and background colors instantly.

Note

Swapping colors with X is useful when you are alternating between two colors frequently — for example, painting highlights and shadows.

Effects

Effects add visual enhancements to shapes without changing the underlying geometry. You can apply effects from the Effects section in the Properties panel.

Adding an effect

1. Select a shape on the canvas.
2. In the Properties panel, find the Effects section.
3. Click the + button and choose an effect type.
4. Adjust the effect settings as needed.

Multiple effects can be stacked on a single shape, and each effect has its own visibility toggle so you can compare the result with and without it.

Effect types

Drop Shadow

Adds a shadow behind the shape that appears to lift it off the canvas.

Property	Description
Offset X	Horizontal displacement of the shadow.
Offset Y	Vertical displacement of the shadow.
Blur Radius	How soft or sharp the shadow edge is. Higher values produce a softer shadow.
Spread Radius	Expands or contracts the shadow size before blurring.
Color	The shadow color (RGBA), typically a semi-transparent black.

Inner Shadow

Adds a shadow inside the shape, creating an inset or embossed appearance.

Property	Description
Offset X	Horizontal displacement of the inner shadow.
Offset Y	Vertical displacement of the inner shadow.
Blur Radius	Softness of the inner shadow edge.
Spread Radius	Expands or contracts the inner shadow size.
Color	The inner shadow color (RGBA).

Layer Blur

Applies a gaussian blur to the entire shape, softening all of its content.

Property	Description
Radius	The blur intensity. Higher values produce a stronger blur effect.

Background Blur

Applies a gaussian blur to the content visible behind the shape, creating a frosted-glass effect.

Property	Description
Radius	The blur intensity applied to the background content.

Tip

Background blur is commonly used for overlay panels, toolbars, and modal backdrops. Combine it with a semi-transparent fill for a modern frosted-glass look.

Quick reference

Action	How
Add a fill layer	Select shape, click + in Fill section
Add a stroke layer	Select shape, click + in Stroke section
Change paint type	Click the paint type buttons in the fill or stroke popup
Edit a gradient on canvas	Click the gradient preview to enter gradient editing mode
Add a gradient color stop	Click along the gradient bar on canvas
Swap foreground / background	X
Add an effect	Select shape, click + in Effects section
Toggle fill / stroke / effect visibility	Click the eye icon on the layer
Change blend mode	Use the blend mode dropdown on the fill or stroke row

For the complete shortcut list, see the Keyboard Shortcuts reference.