Design Mode Extra Style Panel

• Extra Style Panel
  • Base Transform & Display Section
  • Color Effect Modes Section
  • Liquid Glass Effect Section
  • Progressive Blur Section
  • Content Overlay Section
  • Box Shadow Section
  • Text Shadow Section
  • Text Stroke Section
  • Spikes Section

Extra Style Panel

The Design mode Extra Style panel is accessed by selecting a layer via the Canvas or Layers sidebar, and in the Right Sidebar clicking the Design icon ¹ to enter Design Mode. Then click the Extra Style tab icon ² to open the Extra Style panel.

Through the Extra Style panel you can apply extra visuals in addition to a layer’s core styling. These include three dimensional rotation, opacity, blend and filter modes, glass and blur effects, shadows, strokes, and spikes cut into the layer’s edges.

Which sections appear depends on the type of layer selected. A Text layer is the only type that offers Text Shadow. Image and Video layers and the Slide Background are the only ones that offer Content Overlay. The Slide Background does not offer Base Transform & Display, Box Shadow, Text Stroke or Spikes.

Base Transform & Display Section

In the Base Transform & Display section rotate the layer in three dimensions, set its opacity, blur the content sitting behind it, and control how it is sorted on iOS devices.

Rotate X (Number, degrees, range)

Rotate the layer around its horizontal axis, tipping the top of the layer away from or towards the viewer. The value can also be set by dragging left and right on the field.

Options:

• _-360deg: Minimum. A full rotation backwards.
• _360deg: Maximum. A full rotation forwards.

Rotate Y (Number, degrees, range)

Rotate the layer around its vertical axis, swinging the left and right edges away from or towards the viewer. The value can also be set by dragging left and right on the field.

Options:

• _-360deg: Minimum. A full rotation to the left.
• _360deg: Maximum. A full rotation to the right.

Rotate Z (Number, degrees, range)

Rotate the layer flat against the screen, the way a picture on a wall is tilted. The value can also be set by dragging left and right on the field.

Options:

• _-360deg: Minimum. A full anticlockwise rotation.
• _360deg: Maximum. A full clockwise rotation.

Opacity (Number, range)

Set how transparent the layer is. The value can also be set by dragging left and right on the field.

Options:

• ₀: Minimum. The layer is fully transparent and cannot be seen.
• ₁: Maximum. The layer is fully opaque.

Backdrop Blur (Number, range)

Blur whatever sits behind the layer, so the layer reads as a frosted panel over the content beneath it. The layer’s own content stays sharp. The value can also be set by dragging left and right on the field.

Options:

• ₀: Minimum. No blur is applied to the content behind the layer.
• ₁₀₀: Maximum. The strongest available blur.

iOS Sort Mode (Dropdown)

Choose the property used to decide the layer’s stacking order on iOS devices, which sort three dimensionally transformed elements differently to other browsers.

Options:

• _Default: Leave the stacking order to the browser.
• _{By Transform Z}: Sort the layer by its Z axis position.
• _{By Transform X}: Sort the layer by its X axis position.
• _{By Rotation}: Sort the layer by its rotation.
• _{By Perspective}: Sort the layer by its perspective value.

Color Effect Modes Section

In the Color Effect Modes section control how the layer’s colors mix with the content behind it, and apply a preset photographic style to the layer.

Blend (Dropdown)

Set how the layer’s colors combine with the colors of whatever sits behind it.

Options:

• _Normal: Draw the layer over the content behind it with no mixing.
• _Multiply: Multiply the two sets of colors together, which darkens the result and drops out white.
• _Screen: Invert, multiply and invert again, which lightens the result and drops out black.
• _Overlay: Multiply the dark areas and screen the light areas, raising contrast.
• _Darken: Keep whichever of the two colors is darker at each point.
• _Lighten: Keep whichever of the two colors is lighter at each point.
• _{Color Dodge}: Brighten the content behind in proportion to the layer’s color.
• _{Color Burn}: Darken the content behind in proportion to the layer’s color.
• _{Hard Light}: Apply Multiply or Screen depending on the layer’s color, giving a harsh spotlight effect.
• _{Soft Light}: Apply a gentler version of Hard Light, giving a diffused light effect.
• _Difference: Subtract the darker color from the lighter one, inverting where the two overlap.
• _Exclusion: Produce a lower contrast version of Difference.
• _Hue: Take the hue from the layer and the saturation and brightness from the content behind.
• _Saturation: Take the saturation from the layer and the hue and brightness from the content behind.
• _Color: Take the hue and saturation from the layer and the brightness from the content behind.
• _Luminosity: Take the brightness from the layer and the hue and saturation from the content behind.

Filter (Dropdown)

Apply a preset photographic color style to the layer, in the style of a social media photo filter.

Options:

• _None: Apply no filter.
• ₁₉₇₇: Lifts contrast, brightness and saturation for a warm, punchy result.
• _Aden: Shifts hues towards yellow and brightens the layer while lowering contrast and saturation.
• _Brooklyn: Lowers contrast and lifts brightness for a soft, airy result.
• _Clarendon: Raises contrast and saturation for a bold, vivid result.
• _Earlybird: Lowers contrast and adds a light sepia wash for an aged result.
• _Gingham: Lifts brightness slightly and shifts hues towards yellow for a gentle warm cast.
• _Hudson: Brightens the layer and softens contrast while lifting saturation slightly.
• _Inkwell: Converts the layer to black and white with raised contrast and brightness.
• _Lark: Lowers contrast for a flatter, softer result.
• _Lofi: Strongly raises contrast with a slight saturation lift for a hard, graphic result.
• _Mayfair: Raises contrast and saturation slightly for a subtle lift.
• _Moon: Converts the layer to black and white with a slight lift in contrast and brightness.
• _Nashville: Adds a light sepia wash with raised contrast and saturation for a warm retro result.
• _Perpetua: Blends a blue to yellow gradient over the layer, shifting it from cool at the bottom to warm at the top.
• _Reyes: Adds a sepia wash and lifts brightness while dropping contrast and saturation for a dusty, faded result.
• _Rise: Adds a warm sepia wash with slightly lifted brightness and reduced contrast and saturation.
• _Slumber: Drains saturation and lifts brightness for a muted, hazy result.
• _Toaster: Strongly raises contrast and darkens the layer for a heavy, burnt result.
• _Walden: Brightens and strongly saturates the layer with a warm hue shift and a sepia wash.
• _Willow: Half desaturates and darkens the layer for a soft monochrome result.
• _Xpro2: Adds a moderate sepia wash for a warm, aged tone.

Liquid Glass Effect Section (Toggle)

In the Liquid Glass Effect section give the layer a frosted glass appearance, blurring the content seen through it. Use the section toggle to turn the frosted glass treatment on the layer on and off.

Blur (Number, pixels, range)

Set how strongly the content seen through the glass is blurred. The value can also be set by dragging left and right on the field.

Options:

• _0px: Minimum. The content behind the glass stays sharp.
• _40px: Maximum. The strongest available blur.

Intensity (Number, percentage, range)

Set how strongly the glass treatment is applied over the layer. The value can also be set by dragging left and right on the field.

Options:

• _0%: Minimum. The glass treatment has no visible strength.
• _100%: Maximum. The glass treatment is applied at full strength.

Progressive Blur Section (Toggle)

In the Progressive Blur section blur the layer unevenly, ramping from sharp to fully blurred across the layer towards a chosen edge, with an optional white tint following the same ramp. Use the section toggle to turn the graduated blur on the layer on and off.

Direction (Dropdown)

Set the edge of the layer where the blur is strongest. The blur fades away towards the opposite edge.

Options:

• _Top: The blur is strongest at the top edge and fades downwards.
• _Bottom: The blur is strongest at the bottom edge and fades upwards.
• _Left: The blur is strongest at the left edge and fades to the right.
• _Right: The blur is strongest at the right edge and fades to the left.

Blur (Number, pixels, range)

Set the maximum blur reached at the edge chosen in Direction. The value can also be set by dragging left and right on the field.

Options:

• _0px: Minimum. No blur is applied.
• _60px: Maximum. The strongest available blur.

Fade (Number, percentage, range)

Set how far across the layer the blur spreads, measured from the edge chosen in Direction. A value of 70% blurs the nearest seventy percent of the layer and leaves the remaining thirty percent sharp. The value can also be set by dragging left and right on the field.

Options:

• _1%: Minimum. The blur is confined to a narrow band at the chosen edge.
• _100%: Maximum. The blur ramp spans the whole layer.

Tint (Number, percentage, range)

Wash the blurred part of the layer with white, at its strongest on the edge chosen in Direction and fading out along with the blur. The value can also be set by dragging left and right on the field.

Options:

• _0%: Minimum. No white is added.
• _80%: Maximum. The chosen edge is washed to near white.

Content Overlay Section

In the Content Overlay section lay a repeating pattern or a solid color wash over the layer’s media.

Pattern (Dropdown)

Choose the overlay drawn over the layer’s media. No Overlay draws nothing, Full Filled produces a solid wash of color, and every remaining option produces a repeating pattern.

Options:

• _{No Overlay}: Draw nothing over the layer’s media.
• _{Full Filled}: Cover the media with a solid wash of a single color.
• _{Dotted Small}: Cover the media with a fine grid of dots.
• _{Dotted Medium}: Cover the media with a medium grid of dots.
• _{Dotted Large}: Cover the media with a coarse grid of dots.
• _{Horizontal Small}: Cover the media with closely spaced horizontal lines.
• _{Horizontal Medium}: Cover the media with medium spaced horizontal lines.
• _{Horizontal Large}: Cover the media with widely spaced horizontal lines.
• _{Vertical Small}: Cover the media with closely spaced vertical lines.
• _{Vertical Medium}: Cover the media with medium spaced vertical lines.
• _{Vertical Large}: Cover the media with widely spaced vertical lines.
• _{Circles Small}: Cover the media with a fine pattern of circles.
• _{Circles Medium}: Cover the media with a medium pattern of circles.
• _{Diagonal 1}: Cover the media with diagonal lines in the first of four variations.
• _{Diagonal 2}: Cover the media with diagonal lines in the second of four variations.
• _{Diagonal 3}: Cover the media with diagonal lines in the third of four variations.
• _{Diagonal 4}: Cover the media with diagonal lines in the fourth of four variations.
• _Cross: Cover the media with a crosshatch of intersecting lines.

Pattern Size (Number, range)

Scale the repeating pattern up or down. Higher values make each repetition of the pattern larger.

Options:

• ₀: Minimum. The pattern is scaled down to nothing.
• ₉₉₉₉₉₉: Maximum. The pattern is scaled far beyond the size of any layer.

Dot Color (Color Swatch)

Set the color of the marks that make up the pattern, whether those marks are dots, lines, circles or crosshatching.

Gap Color (Color Swatch)

Set the color filling the space between the pattern’s marks. Use a transparent color here to let the layer’s media show through the gaps.

Overlay (Color Swatch)

Set the color of the solid wash drawn over the layer’s media. Use a partly transparent color to let the media show through.

Blur (Number, range)

Blur the layer’s media where it shows through the wash, measured in pixels. The wash itself stays sharp.

Options:

• ₀: Minimum. The media beneath the wash stays sharp.
• ₁₀₀: Maximum. The strongest available blur.

Box Shadow Section (Toggle)

In the Box Shadow section cast one or more shadows from the layer’s outer box. Several shadows can be stacked to build up a more complex result. Use the section toggle to turn the shadow cast from the layer’s outer box on and off.

X (Number, pixels, range)

Offset the box shadow horizontally. The value can also be set by dragging left and right on the field.

Options:

• _-50px: Minimum. The shadow sits furthest to the left of the layer.
• _50px: Maximum. The shadow sits furthest to the right of the layer.

Y (Number, pixels, range)

Offset the box shadow vertically. The value can also be set by dragging left and right on the field.

Options:

• _-50px: Minimum. The shadow sits furthest above the layer.
• _50px: Maximum. The shadow sits furthest below the layer.

Blur (Number, pixels, range)

Soften the edge of the box shadow. The value can also be set by dragging left and right on the field.

Options:

• _0px: Minimum. The shadow has a hard, sharply defined edge.
• _100px: Maximum. The shadow is diffused into a soft haze.

Spread (Number, pixels, range)

Grow or shrink the box shadow relative to the size of the layer, before any blur is applied. The value can also be set by dragging left and right on the field.

Options:

• _-20px: Minimum. The shadow is drawn in from the layer’s edges.
• _40px: Maximum. The shadow is expanded out past the layer’s edges.

Shadow Color (Color Swatch)

Set the color of the box shadow. Partly transparent colors produce a more natural result than solid ones.

Add Level (Button)

Add another box shadow, with its own X, Y, Blur, Spread and Shadow Color, stacked over the ones already present. Once more than one level exists each is labelled with its number.

Remove Level (Button)

Delete the box shadow level it sits on. The last remaining level cannot be removed this way, so turn Box Shadow off instead to clear the shadow entirely.

Text Shadow Section (Toggle)

In the Text Shadow section cast one or more shadows from the shapes of the characters themselves, rather than from the layer’s box. Several shadows can be stacked to build up a more complex result. Use the section toggle to turn the shadow cast from the text characters on and off.

X (Number, pixels, range)

Offset the text shadow horizontally. The value can also be set by dragging left and right on the field.

Options:

• _-50px: Minimum. The shadow sits furthest to the left of the characters.
• _50px: Maximum. The shadow sits furthest to the right of the characters.

Y (Number, pixels, range)

Offset the text shadow vertically. The value can also be set by dragging left and right on the field.

Options:

• _-50px: Minimum. The shadow sits furthest above the characters.
• _50px: Maximum. The shadow sits furthest below the characters.

Blur (Number, pixels, range)

Soften the edge of the text shadow. The value can also be set by dragging left and right on the field.

Options:

• _0px: Minimum. The shadow has a hard, sharply defined edge.
• _100px: Maximum. The shadow is diffused into a soft haze.

Shadow Color (Color Swatch)

Set the color of the text shadow. Partly transparent colors produce a more natural result than solid ones.

Add Level (Button)

Add another text shadow, with its own X, Y, Blur and Shadow Color, stacked over the ones already present. Once more than one level exists each is labelled with its number.

Remove Level (Button)

Delete the text shadow level it sits on. The last remaining level cannot be removed this way, so turn Text Shadow off instead to clear the shadow entirely.

Text Stroke Section (Toggle)

In the Text Stroke section draw an outline around the edges of text characters. The outline is drawn inside the character shapes, so a heavy stroke eats into the letterform. Use the section toggle to turn the outline around text characters on and off.

Stroke Color (Color Swatch)

Set the color of the outline drawn around the text characters.

Stroke Width (Number, pixels, range)

Set how thick the outline around the text characters is.

Options:

• _0px: Minimum. No outline is drawn.
• _5000px: Maximum. Far thicker than any readable character, which fills the text solidly with the stroke color.

Spikes Section (Toggle)

In the Spikes section cut a row of triangular points into the left and right edges of the layer. The two edges are configured separately, so one can be spiked while the other stays straight. Use the section toggle to turn the spiked edges on the layer on and off.

Left (Dropdown)

Choose how many points are cut into the left edge of the layer, and where they sit along it.

Options:

• _{No Spike}: Leave the left edge straight.
• _{Top Spike}: Cut a single point near the top of the left edge.
• _{Middle Spike}: Cut a single point at the middle of the left edge.
• _{Bottom Spike}: Cut a single point near the bottom of the left edge.
• _{Two Spikes}: Cut two evenly spaced points into the left edge.
• _{Three Spikes}: Cut three evenly spaced points into the left edge.
• _{Four Spikes}: Cut four evenly spaced points into the left edge.
• _{Five Spikes}: Cut five evenly spaced points into the left edge.

Left Width (Number, percentage, range)

Set how deep the points on the left edge are, as a percentage of the layer’s width. The tips of the points stay at the layer’s edge and the notches between them are cut in by this amount.

Options:

• _0%: Minimum. The points have no depth and the edge stays straight.
• _100%: Maximum. The notches are cut all the way across to the opposite edge.

Right (Dropdown)

Choose how many points are cut into the right edge of the layer, and where they sit along it.

Options:

• _{No Spike}: Leave the right edge straight.
• _{Top Spike}: Cut a single point near the top of the right edge.
• _{Middle Spike}: Cut a single point at the middle of the right edge.
• _{Bottom Spike}: Cut a single point near the bottom of the right edge.
• _{Two Spikes}: Cut two evenly spaced points into the right edge.
• _{Three Spikes}: Cut three evenly spaced points into the right edge.
• _{Four Spikes}: Cut four evenly spaced points into the right edge.
• _{Five Spikes}: Cut five evenly spaced points into the right edge.

Right Width (Number, percentage, range)

Set how deep the points on the right edge are, as a percentage of the layer’s width. The tips of the points stay at the layer’s edge and the notches between them are cut in by this amount.

Options:

• _0%: Minimum. The points have no depth and the edge stays straight.
• _100%: Maximum. The notches are cut all the way across to the opposite edge.