A smooth, cute caret with a cool gradient, an OCR-friendly font, and motivational messages to boost typing speed and focus. Perfect for Keymash.io!
Keymash(UPDATED!) by sheezh
Details
Authorsheezh
LicenseNo License
Categorykeymash.io
Created
Updated
Code size1.8 kB
Code checksum4ba86ca2
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Notes:
Uses IBM Plex Mono for clear OCR readability.
Features a smooth animated caret with a gradient effect.
Adds motivational messages like "Type Faster!" in the corners.
Dark mode-friendly with a deep blue gradient background.
Works exclusively on Keymash.io.
Source code
/* ==UserStyle==
@name CuteCaretStyle
@version 20250315.03
@namespace userstyles.world/user/custom
@description A smooth and cute caret style with a clean, OCR-friendly font for better readability on Keymash.io.
@author CustomUser
@license No License
==/UserStyle== */
@-moz-document domain("keymash.io") {
/* Install IBM Plex Sans for best OCR readability */
/* https://fonts.google.com/specimen/IBM+Plex+Sans */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400&display=swap');
.match--mono, .match--letter, div {
font-family: "IBM Plex Sans", sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0.03em !important;
line-height: 1.6 !important;
color: #ffffff !important; /* White text for clarity */
}
/* Smooth, animated caret */
.caret-idle {
background: linear-gradient(90deg, #6a11cb, #2575fc) !important; /* Purple-to-blue gradient */
height: 28px !important;
width: 2px !important;
border-radius: 10px;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
/* Smooth typing area */
.match--input {
border-bottom: 3px solid #6a11cb !important;
background: rgba(106, 17, 203, 0.2) !important;
padding: 10px !important;
border-radius: 10px !important;
transition: all 0.3s ease-in-out;
}
.match--input:focus {
background: rgba(106, 17, 203, 0.4) !important;
}
/* General UI Enhancements */
body {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important; /* Deep blue gradient */
}
.text-gray-400 {
color: rgba(200, 200, 200, 0.8) !important;
}
.text-orange-400 {
color: #ffffff !important; /* White text */
}
}