Copy the effective authored style from one or more elements, optionally include each source element’s own state rules and user classes, then paste the mapped snapshots onto another selection.
Where: Right-click a canvas selection → Copy/Paste → Copy styles
Key ideas
- Properties by default: Copy styles flattens the authored cascade visible at the current breakpoint/state, retains token references, includes inherited authored type/color values, effects, and GPU filters, and preserves source ordering for shorthand/longhand precedence.
- Include states: Optionally copy the source element’s own pseudo/attribute-state rules, including their media/container-query context. Ancestor-driven selectors are deliberately excluded because turning them into target states would change their meaning.
- Include classes: Optionally replace the target’s user classes with the copied user classes while preserving protected system classes; missing class definitions are created before applying the names.
- Multiple-element mapping: When copying several elements, snapshots map to the paste selection in order. If the counts differ, the first copied snapshot is reused for the remaining targets.
Steps
- Select the source element or ordered set of source elements and right-click.
- Open Copy/Paste. Enable Include states and/or Include classes only when those relationships should travel with the visible properties.
- Choose Copy styles and confirm the toast describes the copied extras.
- Select the target element or ordered target set, right-click, and choose Paste styles.
- Check the base appearance, responsive breakpoint, copied state previews, and class assignment before repeating broadly.
Tips
- Leave Include classes off when the target should look the same but keep its own semantic class identity.
- Use a class directly for a reusable system; Copy styles is best for a controlled one-time transfer.
Limitations and important notes
- Only the selected element’s own state selectors are copied; parent-hover-child and other ancestor-driven relationships are not rewritten.
- Classes are replaced as a set when included, not merged one name at a time.
- Copy styles transfers authored styles, not content, hierarchy, interactions, or component identity.
Troubleshooting
The hover effect did not paste
Enable Include states before copying and confirm the rule belongs to the element itself rather than to an ancestor such as .card:hover .icon.
The target’s class names changed unexpectedly
Undo and copy again with Include classes turned off; the normal property snapshot keeps authored var() references without taking the class list.