Fills & Strokes

Every shape can have fills (interior color) and strokes (outline). Azyrom supports multiple fills and strokes on a single element, plus solid colors, gradients, and images.

Fills

Fills color the interior of shapes.

Fill Types

• Solid - Single color
• Linear Gradient - Color transitions in a line
• Radial Gradient - Color transitions from center outward
• Angular Gradient - Color transitions around a point
• Image - Fill with a picture

Adding a Fill

1. Select a shape
2. In Properties Panel, find the Fill section
3. Click the color swatch to open the color picker
4. Choose your fill type and color

Fill Enable Toggle (NEW)

Control whether the fill is visible without losing your fill settings:

• Toggle Switch - On/off switch next to fill color in Properties Panel
• Preserve Settings - Turning fill off keeps color, gradient, and other settings intact
• Quick Testing - Toggle fill on/off to test different design variations
• Stroke-Only Shapes - Disable fill to create outline-only shapes
• Hit Testing - Elements with fill disabled won't respond to clicks on interior (only stroke)

When to Use

• Outline Icons - Create stroke-only icon designs
• Wireframes - Disable fills for low-fidelity mockups
• Comparison - Toggle to compare filled vs outlined versions
• Progressive Design - Start with outlines, enable fills later

Multiple Fills

Stack multiple fills on one shape:

1. Click the + button in the Fill section
2. Each fill appears as a row
3. Fills render bottom to top (last fill is on top)
4. Use opacity to blend fills together

Gradients

Creating a Linear Gradient

1. Select fill type: Linear Gradient
2. Click on the gradient bar to add color stops
3. Drag stops to adjust positions
4. Click a stop to change its color
5. Drag handles on canvas to adjust angle and length

Creating a Radial Gradient

1. Select fill type: Radial Gradient
2. Add and adjust color stops as above
3. Drag the center handle to position the gradient
4. Drag edge handles to adjust shape and size

Gradient Handles

When a gradient fill is selected, handles appear on the canvas:

• Start point - Where the gradient begins
• End point - Where the gradient ends
• Center (radial) - Center of the radial gradient

Strokes

Strokes are outlines around shapes.

Stroke Properties

Property	Description
Color	Stroke color (same options as fill)
Width	Stroke thickness in pixels
Position	Inside, center, or outside the path
Cap	End style: butt, round, or square
Join	Corner style: miter, round, or bevel
Dash	Pattern for dashed lines

Stroke Enable Toggle (NEW)

Control whether the stroke is visible without losing your stroke settings:

• Toggle Switch - On/off switch next to stroke color in Properties Panel
• Preserve Settings - Turning stroke off keeps color, width, style, and other settings
• Quick Testing - Toggle stroke on/off to test different design variations
• Fill-Only Shapes - Disable stroke to create shapes with no outline
• Rendering Performance - Disabled strokes don't render, saving performance

When to Use

• Filled Shapes - Create solid color shapes without visible borders
• A/B Testing - Compare designs with and without strokes
• Layer Building - Add strokes later in the design process
• Performance - Disable complex strokes for faster rendering during edits

Stroke Position

• Center - Stroke straddles the path (default)
• Inside - Stroke is entirely inside the shape
• Outside - Stroke is entirely outside the shape

Line Caps

How open path ends look:

• Butt - Flat end at exactly the endpoint
• Round - Rounded end, extends past endpoint
• Square - Square end, extends past endpoint

Line Joins

How corners look where segments meet:

• Miter - Sharp corner (may be very pointy)
• Round - Rounded corner
• Bevel - Flat corner

Dashed Lines

Create dashed or dotted strokes:

1. Enter dash pattern (e.g., "5, 3" for 5px dash, 3px gap)
2. Use multiple values for complex patterns
3. Round caps with small dashes create dots

Multiple Strokes

Like fills, you can add multiple strokes:

1. Click + in the Stroke section
2. Each stroke renders on top of the previous
3. Use different widths to create outlines

Example: A white 4px stroke under a black 2px stroke creates an outlined effect.

Gradient Strokes (NEW)

Strokes now support all fill types including gradients, just like fills!

How Gradient Strokes Work

• Same as Fills - Strokes support solid colors, linear gradients, radial gradients, angular gradients, images, and patterns
• Multiple Stroke Layers - Each stroke can have its own gradient or fill type
• Blend Modes - Each stroke layer can have its own blend mode for advanced effects
• Opacity Control - Control opacity for each stroke layer independently

Creating a Gradient Stroke

1. Select a shape
2. In Properties Panel, find the Stroke section
3. Click the + button to add a stroke layer (or use existing stroke)
4. Click the color swatch
5. Select gradient type: Linear, Radial, or Angular
6. Add color stops and adjust gradient handles on canvas

Advanced Stroke Effects

Combine multiple gradient strokes for professional effects:

• Neon Glow - Radial gradient stroke (bright center to dark edge) with high opacity
• Rainbow Outline - Linear gradient stroke with multiple color stops
• Metallic Border - Angular gradient stroke with silver/gold colors
• Layered Strokes - Stack solid + gradient strokes for depth

Swapping Fill and Stroke

Quickly swap fill and stroke colors:

• Press Shift + X
• Or click the swap icon between fill and stroke swatches

Removing Fill or Stroke

• Click the - button next to the fill/stroke
• Or set opacity to 0%
• Or click the "none" icon in the color picker

Default Styles

New shapes use default fill and stroke. Change defaults:

1. Select an element with desired styles
2. Edit → Set as Default Style
3. New shapes will use these styles