Try a tool
All tools

EVERYDAY TOOLS

Click & cursor designer

Pick a pointer and a click effect, try it with your mouse or finger, then copy the CSS or download the image.

Design your pointer

Nothing is uploaded. Your design stays in this tab.

Try it here

Move, click or tap inside the pad, then scroll. Each effect stays where you pressed, so it moves with the page.

Click anywhere

Press the mouse or touch the screen to see your effect.

Scroll down. Effects you already made scroll away with this text.

Keep going.

Nearly there.

Tap again near the bottom.

That is the end of the pad.

Quick guide Steps, example & tips
  1. Step 1

    Choose a pointer style, colour and size.

  2. Step 2

    Pick a click effect, then move, click, tap and scroll on the preview pad.

  3. Step 3

    Copy the CSS or download the pointer as PNG or SVG.

Try this example

A pink pointing finger with a ripple effect, copied as one line of CSS for your own page.

What should I check?

Custom cursors only show on devices with a mouse. Touch screens show the click effect but no pointer. Browsers limit custom cursor images to about 128 px.

Design a pointer and a click effect, then test it

Choose a pointer style, colour and size, then add a ripple, burst or pulse effect for clicks and taps. Try it on the preview pad with your mouse or finger. Effects stay where you pressed, so they move with the content when you scroll.

When you are happy with the design, copy one line of CSS for your own website or download the pointer as a PNG or SVG. Everything runs in your browser and nothing is uploaded.

Free to use. No sign-up required.

How to use this tool

  1. Choose a pointer style, colour and size.
  2. Pick a click effect, then move, click, tap and scroll on the preview pad.
  3. Copy the CSS or download the pointer as PNG or SVG.

A practical example

A pink pointing finger with a ripple effect becomes one line of CSS you can paste into your own stylesheet.

Before you finish

Test the copied cursor on a real page with a mouse. Touch screens show the tap effect but no pointer, and browsers may ignore cursor images above 128 pixels.

Frequently asked questions

Will the custom pointer show on a phone?

No. Touch screens have no mouse pointer, so only the tap effect applies. The pointer appears for visitors who use a mouse or trackpad.

How big can a custom cursor be?

Browsers limit cursor images to about 128 pixels, and very large ones may be ignored. The designer keeps the pointer between 20 and 64 pixels.

Does the copied CSS work in every browser?

Modern desktop browsers support an SVG cursor with a fallback. The CSS includes the standard auto cursor as a fallback if the image is not used.