105 useful things
Create a modern frosted glass card effect using CSS backdrop-filter and blur.
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);Create eye-catching neon glow text using CSS text-shadow with multiple layers.
.neon-text {
color: #fff;
text-shadow:
0 0 5px #fff,Create a smoothly animating gradient background that shifts colors continuously.
.animated-gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;The simplest way to perfectly center content both horizontally and vertically.
.flex-center {
display: flex;
justify-content: center;
align-items: center;Create an elegant card that lifts and shows a shadow on hover.
.lift-card {
background: #1a1a2e;
border-radius: 12px;
padding: 24px;Create a responsive grid that automatically adjusts columns based on available space.
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;Style scrollbars to match your design using CSS.
/* Webkit browsers (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;Truncate text with ellipsis for single line or multiple lines.
/* Single line truncation */
.truncate-single {
white-space: nowrap;
overflow: hidden;Maintain consistent aspect ratio for images, videos, or containers.
/* Modern aspect-ratio property */
.ratio-16-9 {
aspect-ratio: 16 / 9;
width: 100%;Apply beautiful gradient colors to text using CSS.
.gradient-text {
background: linear-gradient(135deg, #3a7bff, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;Enable smooth scrolling for anchor links and scroll actions.
/* Enable smooth scrolling globally */
html {
scroll-behavior: smooth;
}Modern button hover effects with smooth transitions.
/* Glow effect */
.btn-glow {
background: linear-gradient(135deg, #3a7bff, #8b5cf6);
color: white;