A smooth and cute custom typing caret for Keymash.io with an adorable design, soft animations, and a beautiful design made!
Keymash by sheezh
Details
Authorsheezh
LicenseCC BY-NC-SA 4.0
Categorykeymash
Created
Updated
Size1.7 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Notes
Features:
Smooth, animated typing caret with a gradient color.
Cute, modern font (Poppins) for a delightful typing experience.
Subtle UI enhancements for better readability and aesthetics.
Requirements:
Install the Poppins font for the best experience.
Changelog:
v1.0 (March 15, 2025) – Initial release with smooth animated caret and UI enhancements.
Issues & Feedback:
Please report any issues or suggestions on GitHub Issues.
Source code
/* ==UserStyle==
@name CuteCaretStyle
@version 20250315.01
@namespace userstyles.world/user/custom
@description A smooth and cute caret style with adorable design and cool OCR-friendly font.
@author CustomUser
@license No License
==/UserStyle== */
@-moz-document domain("keymash.io") {
/* Install Poppins font for best effect */
/* https://fonts.google.com/specimen/Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
.match--mono, .match--letter, div {
font-family: "Poppins", sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
line-height: 1.6 !important;
color: #ff77a9 !important;
}
/* Cute, smooth, and animated caret */
.caret-idle {
background: linear-gradient(90deg, #ff77a9, #ffb3c6) !important;
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 #ff77a9 !important;
background: rgba(255, 183, 197, 0.2) !important;
padding: 10px !important;
border-radius: 10px !important;
transition: all 0.3s ease-in-out;
}
.match--input:focus {
background: rgba(255, 183, 197, 0.4) !important;
}
/* General UI Enhancements */
body {
background: linear-gradient(135deg, #ffdee9 0%, #b5fffc 100%) !important;
}
.text-gray-400 {
color: rgba(100, 100, 100, 0.8) !important;
}
.text-orange-400 {
color: #ff77a9 !important;
}
}