Breakpoint Calculator
Calculate CSS breakpoints for responsive design. Compare breakpoints from popular frameworks like Tailwind, Bootstrap, and more.
Breakpoint Settings
Active Breakpoint at 1024px
lg
Breakpoint Visualization
sm
640px
md
768px
lg
1024px
xl
1280px
2xl
1536px
Test
Media Queries
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }CSS Variables
:root {
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}