New
New
New
Guide
- Custom
- Cursor
Guide
- Custom
- Cursor
Guide
- Custom
- Cursor
How to Create a Custom Cursor in Framer
In this blog, I’ll show you how to create a custom cursor in Framer. By using a simple white circle with an inverted color effect, no code required. You’ll learn how to turn it into a component, add subtle animations, and apply it to any element on your site in just two easy steps.
Posted by
Nandi
Table of contents
Design your cursor
Creating something like this in Framer is super simple. It's only 2 steps. To start, we need to design the actual cursor. In this example, we’re keeping it simple: just a white circle. Here’s what you do:
Add a new frame and make it a perfect circle.
Set the fill color to white.
On the right panel, change the Blending Mode to Difference.
This “Difference” mode is where the magic happens. It inverts the colors behind the cursor, creating a cool color effect, especially on hover. Once you’re happy with the look, turn this circle into a component. Just right-click it and select Create Component.
Apply the cursor to your element
Now that your cursor is ready, let’s add it to an element, like a button.
Select the button (or any other element).
In the right panel, scroll to the Cursor section.
Click on it, choose Custom Cursor, and select the component you just created.
Set it to Replace to fully swap the default cursor with your design.
That’s it! Hover over your button, and you’ll see your custom-designed cursor in action.
Design your cursor
Creating something like this in Framer is super simple. It's only 2 steps. To start, we need to design the actual cursor. In this example, we’re keeping it simple: just a white circle. Here’s what you do:
Add a new frame and make it a perfect circle.
Set the fill color to white.
On the right panel, change the Blending Mode to Difference.
This “Difference” mode is where the magic happens. It inverts the colors behind the cursor, creating a cool color effect, especially on hover. Once you’re happy with the look, turn this circle into a component. Just right-click it and select Create Component.
Apply the cursor to your element
Now that your cursor is ready, let’s add it to an element, like a button.
Select the button (or any other element).
In the right panel, scroll to the Cursor section.
Click on it, choose Custom Cursor, and select the component you just created.
Set it to Replace to fully swap the default cursor with your design.
That’s it! Hover over your button, and you’ll see your custom-designed cursor in action.
Design your cursor
Creating something like this in Framer is super simple. It's only 2 steps. To start, we need to design the actual cursor. In this example, we’re keeping it simple: just a white circle. Here’s what you do:
Add a new frame and make it a perfect circle.
Set the fill color to white.
On the right panel, change the Blending Mode to Difference.
This “Difference” mode is where the magic happens. It inverts the colors behind the cursor, creating a cool color effect, especially on hover. Once you’re happy with the look, turn this circle into a component. Just right-click it and select Create Component.
Apply the cursor to your element
Now that your cursor is ready, let’s add it to an element, like a button.
Select the button (or any other element).
In the right panel, scroll to the Cursor section.
Click on it, choose Custom Cursor, and select the component you just created.
Set it to Replace to fully swap the default cursor with your design.
That’s it! Hover over your button, and you’ll see your custom-designed cursor in action.
Adding the custom cursor to our element in Framer.
Adding the custom cursor to our element in Framer.
Adding the custom cursor to our element in Framer.
Want to try it right now?
You can also check out my Inverted Custom Cursor. It’s built entirely in Framer, no code needed. Remix the project or copy it into your own to see exactly how it works under the hood.
Want to try it right now?
You can also check out my Inverted Custom Cursor. It’s built entirely in Framer, no code needed. Remix the project or copy it into your own to see exactly how it works under the hood.
Want to try it right now?
You can also check out my Inverted Custom Cursor. It’s built entirely in Framer, no code needed. Remix the project or copy it into your own to see exactly how it works under the hood.
Inverted custom cursor.
Inverted custom cursor.
Inverted custom cursor.
Remember: The key steps are always the same, design the cursor, turn it into a component, and apply it as a custom cursor with “Replace.”
Wrapping up
Framer makes it ridiculously easy to add delightful touches like custom cursors. With just a circle, a blending mode, and a couple of clicks, you can take your site’s interactivity to the next level. If you want to stand out with just a small detail, this is a great place to start.
Remember: The key steps are always the same, design the cursor, turn it into a component, and apply it as a custom cursor with “Replace.”
Wrapping up
Framer makes it ridiculously easy to add delightful touches like custom cursors. With just a circle, a blending mode, and a couple of clicks, you can take your site’s interactivity to the next level. If you want to stand out with just a small detail, this is a great place to start.
Remember: The key steps are always the same, design the cursor, turn it into a component, and apply it as a custom cursor with “Replace.”
Wrapping up
Framer makes it ridiculously easy to add delightful touches like custom cursors. With just a circle, a blending mode, and a couple of clicks, you can take your site’s interactivity to the next level. If you want to stand out with just a small detail, this is a great place to start.
