Skip to content
Navigation

Circle Mask Wipe Nav

Active indicator revealed by a circle that expands outward from the link.

Views
0
Free

Live preview is public. Source tabs, copying, the source API, and the isolated preview document require an account.

Account required

Sign up to view the source code

HTML, CSS, React output, copying, and the browser editor are available after you sign in.

#hover#gradient#transform

How to use Circle Mask Wipe Nav

  1. 1. Paste the HTML snippet where the effect should appear.
  2. 2. Add the CSS to your stylesheet or a <style> block.
  3. 3. Adjust colors, timing, and sizing in the browser editor.

This pure-CSS effect has no dependencies and is free to use in personal and commercial projects.

Related Navigation effects

View all