What Is CSS Transform? The transform property lets you visually move, rotate, resize, and skew elements without disrupting document flow. Transforms are GPU-accelerated and animation-friendly — a cornerstone of modern UI effects. ...
Build smooth CSS transitions visually. Select properties, set duration and easing, add multiple transitions, and copy the generated CSS — no coding required. ...
Settings Base Font Size (px) Viewport Width (px) Viewport Height (px) Parent / Context Size (px) Used for em and % calculations Value Unit px rem em vw vh % pt cm mm in Click any card to copy the CSS value. ...
CSS Variables Generator Build design tokens as CSS custom properties — color, typography, spacing, radius, shadows. ...
Upload any image and click to extract exact colors in HEX, RGB, and HSL — instantly, in your browser. No account, no installs, no data ever leaves your device. Related tools: Color Picker · Color Palette Generator · Color Converter Drop image here or Browse file PNG, JPG, GIF, WebP, SVG — stays in your browser Click anywhere on the image to pick a color. Hover to see the magnifier. No color picked yet — click the image above. HEX — Copy RGB — Copy HSL — Copy Nearest name: — Picked Colors Export as CSS Variables Export as JSON Copy How It Works Upload — drag an image onto the canvas or click “Browse file.” Hover — a magnifier circle shows a zoomed view for pixel-perfect picking. Click — instantly see HEX, RGB, HSL, and the nearest CSS color name. History — up to 12 swatches are saved. Click any swatch to reload its values. Export — download your palette as CSS custom properties or a JSON object. Everything runs locally in your browser. No image data is sent anywhere. ...
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 ...