Shadows and shadow sets

Shadows #

Shadows can be added to Pinwheel via the + toolbar button. Each shadow has its own color, color space, X offset, Y offset, blur radius, and spread. Shadows can have alternate values in light mode, dark mode, regular contrast, and high contrast.

A screenshot of Pinwheel’s toolbar

Shadow sets #

Shadow sets can be added to Pinwheel via the + toolbar button. Shadow sets are a way to generate multi-elevation shadows. Shadow sets can have alternate values in light mode, dark mode, regular contrast, and high contrast.

The interpolation setting controls how automatic shadows are generated for the Automatic with 2 Colors and Automatic with 3 Colors styles.

Blur radius scaling factor #

The blur radius of a shadow can have a different appearance, depending on the platform. For example, shadows with the same values look different on the web using CSS when compared to Android, which also looks different to iOS.

A comparison of three rectangles with shadows. The shadows do not look the same.

Pinwheel’s shadow previews match the CSS specification, which defines the blur to be a standard deviation equal to half the blur radius. When exporting for iOS and Android, Pinwheel includes blur radius scale factors that can be used, if you’d like to match the visual appearance of CSS and Pinwheel. The scale factors are set up so they can be ignored, if you’d prefer to not use them.

Further reading: Matching drop shadows across CSS, Android, iOS, Figma, and Sketch

Name processing #

Exporting can process item and group names. That means you can use nicely capitalized names within your Pinwheel documents, and they can also appear how you’d like within the exported code. “My Color” can become “my-color” or “myColor”, based on your export settings.