Whether you’re a beginner or an expert, these powerful CSS tricks will help you create responsive layouts, stunning effects, and interactive elements in no time!
1. Centering an Element (Flexbox)
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
2. Responsive Grid Layout
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
3. CSS Variables (Custom Properties)
:root {
--primary-color: #3498db;
}
.button {
background-color: var(--primary-color);
}
4. Text Ellipsis (Truncate Text)
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
5. Sticky Footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}
6. Centering an Element (Positioning)
.center-positioned {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
7. Flexbox for Responsive Navbar
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
8. Smooth Scroll
html {
scroll-behavior: smooth;
}
9. Custom Scrollbar
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
}
10. Gradient Background
.gradient-bg {
background: linear-gradient(45deg, #f06, #ffcc00);
}
11. Hover Effect for Buttons
.button:hover {
background-color: #2980b9;
transform: scale(1.05);
}
12. Box Shadow
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
13. Full-Width Image
.full-width-image {
width: 100%;
height: auto;
}
14. CSS Grid Auto-Fit Columns
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
15. Fixed Background Image
.fixed-bg {
background-image: url('image.jpg');
background-attachment: fixed;
background-size: cover;
}
16. CSS Animation (Keyframes)
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.element {
animation: fadeIn 2s ease-in;
}
17. Responsive Font Size
.responsive-text {
font-size: calc(16px + 1vw);
}
18. Overlay Effect
.overlay {
position: relative;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
19. Media Queries for Responsive Design
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
20. CSS Variables for Responsive Breakpoints
:root {
--small-screen: 768px;
}
@media (max-width: var(--small-screen)) {
.container {
flex-direction: column;
}
}
21. Responsive Image with Aspect Ratio
.responsive-img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
22. Button with Ripple Effect
.button {
position: relative;
overflow: hidden;
}
.button::after {
content: '';
position: absolute;
width: 300%;
height: 300%;
top: 50%;
left: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
transition: transform 0.5s ease-out;
}
.button:hover::after {
transform: translate(-50%, -50%) scale(1);
}
23. CSS Transition on Hover
.button {
background-color: #3498db;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2ecc71;
}
24. CSS Flexbox Equal Height Columns
.columns {
display: flex;
justify-content: space-around;
align-items: stretch;
}
25. CSS for Loading Spinner
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
26. Floating Action Button
.fab {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
27. Sticky Header
.sticky-header {
position: sticky;
top: 0;
background-color: #fff;
z-index: 100;
}
28. Tooltip on Hover
.tooltip {
position: relative;
}
.tooltip::after {
content: 'Tooltip Text';
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 5px;
border-radius: 5px;
top: -30px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.tooltip:hover::after {
opacity: 1;
}
29. Circular Avatar
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
30. Full-Screen Background
.fullscreen-bg {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
width: 100vw;
height: 100vh;
}
These 30 must-know CSS snippets cover essential layouts, styling patterns, and interactive elements that every developer can use to create responsive, modern web designs. Learn more.
Top comments (0)