Quick links
Standards FAQ
🔑 Sign in
🆕 Create account
💬 Chat on Slack
📩 [email protected]
🖥 Website standards.site
🐦 Twitter @standards_site
📷 Instagram @standards.site
Design & Editing
Editor overview
Adding
Preparing logo assets
Click & Hover Behaviors
Text
Media
Button
Dropdown
Sequence
Navigation Menu
Links
Color
Components
Automations
Tooltips
Effects
Files & Downloads
Collaborative editing
Project backups
Accessibility
Localization
Workspace & Project Management
Publish & share
Dashboard overview
Workspaces
Workspace members
Viewers
Project access page
Project folders
Project settings
Agency client workflow
Project transfers
Apply effects to quickly demonstrate a brand don’t, add emphasis with a drop shadow, or show the x-height of text.
In this guide:
Effects basics
Effects are settings that can be applied to elements.
How to apply effects
- Within the design editor, select an element
- In the right sidebar settings, look for the group labeled Effects
- Select the
+
- Choose the desired effect from the effect dropdown
- Modify the parameters, then press done to apply
<aside>
💡
Tip: Effects can stack, so add more than one to get creative
</aside>
Managing effects
- Effects can be removed by selecting the trash can icon, or from within the effect edit sidebar
- Edit existing effect by selecting them from the Effects settings group on the selected element
General effects
General effects can be applied to most elements to quickly demonstrate a brand Don’t or add emphasis with a drop shadow.
Strikethrough
The strikethrough effect is a line that overlays typically used to show an example of something a viewer should not do.
Drop shadow
The drop shadow effect allows depth to be added behind elements.
Rotate
The rotate effect allows elements to be rotated up to 360 degrees.
Stretch
The stretch effect allows elements to be stretched in or out along an x,y axis.
Related guides
Editor overview
Media
Text