Base64 in CSS cursor
Custom cursors can be embedded as Base64 so they appear instantly, without a delay while the image downloads.
Example
.paint-area {
/* x y = hotspot coordinates, then a mandatory fallback keyword */
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAK...") 4 4, crosshair;
}Notes
- Always provide a keyword fallback such as auto or pointer; the declaration is invalid without it.
- Browsers limit cursor size (usually 128×128, but 32×32 is safest).
Comments (0)
Questions, ideas or a bug in “Base64 in CSS cursor”? Leave a comment, rate the tool, or reply to others.
No comments yet. Be the first to share your feedback!