Skip to main content
kaimdt Toolbox
Generators
Converters
Dev Tools
Colors
Templates
Back to Templates
Text Skeleton
skeletons
CSS
Reset
Copy
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-text { display: flex; flex-direction: column; gap: 8px; } .skeleton-line { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-line:nth-child(1) { width: 100%; } .skeleton-line:nth-child(2) { width: 85%; } .skeleton-line:nth-child(3) { width: 70%; }
Live Preview
Edit the CSS on the left to see live changes. The styles are scoped to the preview area.