layout
Center a div (all methods)
Every way to center elements in CSS.
/* Flexbox (most common) */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid (shortest) */
.parent {
display: grid;
place-items: center;
}
/* Absolute positioning */
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Margin auto (block elements) */
.child {
width: fit-content;
margin: auto;
}Responsive grid without media queries
Auto-responsive grids using CSS Grid.
/* Auto-responsive grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
/* Auto-fill vs auto-fit */
/* auto-fill: creates empty columns */
/* auto-fit: stretches columns to fill space */
.grid-fill {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.grid-fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}utilities
Smooth layered box-shadow
Create beautiful, realistic shadows with layered shadows.
/* Smooth shadow (multiple layers) */
.card {
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
}
/* Dark mode shadow */
.card-dark {
box-shadow:
0 0 0 1px rgba(255,255,255,0.05),
0 4px 16px rgba(0,0,0,0.4);
}animations
Fade in animation
Smooth fade-in animations with CSS keyframes.
/* Fade in from bottom */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.5s ease-out forwards;
}
/* Stagger children */
.stagger > * {
animation: fadeInUp 0.4s ease-out backwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }