Find the closest CSS named color to any hex, RGB, or HSL value — instantly. Browse all 148 CSS named colors, search by name, and copy values with one click. Find Closest CSS Color Name HEX RGB Picker HEX Color Find Name Enter a 6-digit hex code (e.g. #ff6347) ...
Adjust margin, border, padding, and content dimensions in real time. The diagram updates instantly — just like Chrome DevTools — and the ready-to-copy CSS output updates alongside it. ...
Browse all CSS cursor values interactively. Hover any card to preview the cursor, then click to copy the CSS snippet. Use the search box or category tabs to filter. ...
Generate CSS outline code instantly. Adjust style, width, color, and offset — see the live preview update in real time, then copy the ready-to-use CSS. Presets ...
Build smooth CSS transitions visually. Select properties, set duration and easing, add multiple transitions, and copy the generated CSS — no coding required. ...
Paste your Tailwind CSS utility classes and get them sorted in the recommended order — layout first, effects last. Supports single class strings or multi-element HTML snippets. Related tools: CSS Variables Generator · CSS Media Query Generator ...
Check your current browser viewport dimensions in real time, identify which CSS breakpoint is active, and compare against common device presets — all without leaving this page. Related tools: Screen Resolution → Screen Resolution Checker | Media Queries → CSS Media Query Generator — Width (px) × — Height (px) — Breakpoint — — DPR — Breakpoint Indicator 0640768102412801536+ xs<640px sm640–767 md768–1023 lg1024–1279 xl1280–1535 2xl1536px+ window.innerWidth — Viewport width incl. scrollbar window.innerHeight — Viewport height incl. scrollbar document.documentElement — × — clientWidth × clientHeight screen.width × screen.height — Physical screen resolution devicePixelRatio — CSS px to physical px ratio Orientation — Portrait / Landscape Copy All Info Copied to clipboard! Common Device Viewport Reference Device Viewport (CSS px) Tailwind BP Notes iPhone 15 Pro 393 × 852 xs Portrait, @3x iPhone 15 / 14 390 × 844 xs Portrait, @3x iPhone SE (3rd gen) 375 × 667 xs Portrait, @2x iPad (10th gen) 820 × 1180 md Portrait, @2x iPad Pro 12.9" 1024 × 1366 lg Portrait, @2x Pixel 7 412 × 915 xs Portrait, @2.625x Galaxy S24 360 × 780 xs Portrait, @3x MacBook Air 13" 1280 × 800 xl @2x Retina MacBook Pro 14" 1512 × 982 xl @2x Retina MacBook Pro 16" 1728 × 1117 2xl @2x Retina Desktop 1080p 1920 × 1080 2xl @1x standard How to Use Read the live numbers at the top — they update instantly as you resize the browser window. Check the breakpoint bar to see where you fall in the Tailwind CSS grid (xs / sm / md / lg / xl / 2xl). Compare to device presets in the table to understand how your page will look on real devices. Click “Copy All Info” to grab a text snapshot for bug reports or design handoffs. What Each Measurement Means Property What it measures window.innerWidth/Height The visible viewport, including the scrollbar area clientWidth/Height The viewport minus the scrollbar — matches your CSS media queries screen.width/Height The physical display resolution (not affected by zoom) devicePixelRatio How many physical pixels make up one CSS pixel (2 = Retina) Tailwind CSS Breakpoints Reference Prefix Min-width CSS rule (none — xs) 0 px default styles sm 640 px @media (min-width: 640px) md 768 px @media (min-width: 768px) lg 1024 px @media (min-width: 1024px) xl 1280 px @media (min-width: 1280px) 2xl 1536 px @media (min-width: 1536px) Related tools: Screen Resolution → Screen Resolution Checker | Media Queries → CSS Media Query Generator ...