Shadows and corners are presets, named values that blocks pick in their Appearance settings. Change a preset in Styles, and every block that uses it changes. Open them with the paintbrush icon, Styles, in the icon rail, then click Shadows or Corners. Click a preset to open its settings in a panel next to the list. The panel on the other side of the canvas lists under Used by the blocks that use it.
Both screens list Theme presets first, which you can change but not rename or delete, then Custom presets, which you add with the plus button. Each list holds up to 24 custom presets. To rename a custom preset, double-click it. To delete one, right-click it and click Delete. To put a theme preset back, open it, click the three dots at the top of its settings, and click Reset to default. Deleting asks no question; press ⌘Z, or Ctrl+Z on Windows, to bring a preset back.
Shadows
Preset
Layer 1 (X, Y, Blur, Spread)
Layer 2
Small
0, 1, 3, 0
0, 1, 2, -1
Medium
0, 4, 6, -1
0, 2, 4, -2
Large
0, 10, 15, -3
0, 4, 6, -4
Extra large
0, 20, 25, -5
0, 8, 10, -6
Each theme shadow has two layers in black at 10% opacity. A new custom shadow starts as one layer.
Shadow settings
Setting
What it does
Name
Shows for custom shadows only. Up to 32 characters.
Layer 1, Layer 2
Each layer is one shadow. Layers stack in order. Remove one with the × button next to its name.
X, Y
How far the shadow moves sideways and down, from -100 to 100 px. A negative Y moves it up.
Blur
How soft the edge is, from 0 to 200 px. 0 draws a hard edge.
Spread
How much larger or smaller than the block the shadow is, from -100 to 100 px.
Color
The shadow's color. Click the swatch to open the color picker, which also has the opacity in percent.
Inset
Draws the shadow inside the block, as if it were pressed in.
Add layer
Adds a layer. A shadow holds up to 8.
When you delete a custom shadow, the blocks that used it show no shadow.
Corners
Preset
Radius
None
0, square corners
Extra small
4 px
Small
8 px
Medium
12 px
Large
16 px
Extra large
24 px
2X large
32 px
Full
Fully rounded ends, a pill shape
Cards and sections
Cards and sections, at the top of the Corners screen, is the corner every section and block uses when its Corners setting is Default. It is Large at first. Change it to round or square the whole site at once. Full is not offered here. Reset corner settings, in the menu behind the three dots next to the screen's title, puts it back to Large.
Corner settings
None and Full have no settings. Every other corner has these:
Setting
What it does
Name
Shows for custom corners only. Up to 32 characters.
Radius
How round the corner is, in px or rem, from 0 to 200 px. The slider reaches 64 px; type a larger value in the field. A new custom corner starts at 12 px.
Smoothing
Blends the curve into the straight edge for a softer corner. Browsers that cannot draw smoothed corners show an ordinary round corner.
When you delete a custom corner, the blocks that used it take the Cards and sections corner.
Set a block's shadow or corners
A block picks its shadow and corners in its Appearance settings, from these presets or its own values. See Colors and appearance settings.
Shadows and corners are presets, named values that blocks pick in their Appearance settings. Change a preset in Styles, and every block that uses it changes. Open them with the paintbrush icon, Styles, in the icon rail, then click Shadows or Corners. Click a preset to open its settings in a panel next to the list. The panel on the other side of the canvas lists under Used by the blocks that use it.
Both screens list Theme presets first, which you can change but not rename or delete, then Custom presets, which you add with the plus button. Each list holds up to 24 custom presets. To rename a custom preset, double-click it. To delete one, right-click it and click Delete. To put a theme preset back, open it, click the three dots at the top of its settings, and click Reset to default. Deleting asks no question; press ⌘ Z, or Ctrl+Z on Windows, to bring a preset back.
Shadows
Preset
Layer 1 (X, Y, Blur, Spread)
Layer 2
Small
0, 1, 3, 0
0, 1, 2, -1
Medium
0, 4, 6, -1
0, 2, 4, -2
Large
0, 10, 15, -3
0, 4, 6, -4
Extra large
0, 20, 25, -5
0, 8, 10, -6
Each theme shadow has two layers in black at 10% opacity. A new custom shadow starts as one layer.
Shadow settings
Setting
What it does
Name
Shows for custom shadows only. Up to 32 characters.
Layer 1, Layer 2
Each layer is one shadow. Layers stack in order. Remove one with the × button next to its name.
X, Y
How far the shadow moves sideways and down, from -100 to 100 px. A negative Y moves it up.
Blur
How soft the edge is, from 0 to 200 px. 0 draws a hard edge.
Spread
How much larger or smaller than the block the shadow is, from -100 to 100 px.
Color
The shadow's color. Click the swatch to open the color picker, which also has the opacity in percent.
Inset
Draws the shadow inside the block, as if it were pressed in.
Add layer
Adds a layer. A shadow holds up to 8.
When you delete a custom shadow, the blocks that used it show no shadow.
Corners
Preset
Radius
None
0, square corners
Extra small
4 px
Small
8 px
Medium
12 px
Large
16 px
Extra large
24 px
2X large
32 px
Full
Fully rounded ends, a pill shape
Cards and sections
Cards and sections, at the top of the Corners screen, is the corner every section and block uses when its Corners setting is Default. It is Large at first. Change it to round or square the whole site at once. Full is not offered here. Reset corner settings, in the menu behind the three dots next to the screen's title, puts it back to Large.
Corner settings
None and Full have no settings. Every other corner has these:
Setting
What it does
Name
Shows for custom corners only. Up to 32 characters.
Radius
How round the corner is, in px or rem, from 0 to 200 px. The slider reaches 64 px; type a larger value in the field. A new custom corner starts at 12 px.
Smoothing
Blends the curve into the straight edge for a softer corner. Browsers that cannot draw smoothed corners show an ordinary round corner.
When you delete a custom corner, the blocks that used it take the Cards and sections corner.
Set a block's shadow or corners
A block picks its shadow and corners in its Appearance settings, from these presets or its own values. See Colors and appearance settings.