CSS Tools
Visual CSS generators for grid, flexbox, shadows, gradients and animation, plus calculators, minifiers and auditing tools for existing code. Learn more
Aspect Ratio Calculator
Simplest ratio, nearest standard ratio and locked resizing.
Blend Mode Preview Playground
Preview every CSS mix-blend-mode value side by side.
Border-Radius Generator
Independent corners, live preview.
Box-Shadow Generator
Build a shadow visually, copy the CSS.
Clamp() Responsive Font Calculator
Fluid sizes between two screen widths, in rem, with a zoom check.
CSS Animation/Keyframes Generator
Fade, slide, spin, bounce or pulse.
CSS Backdrop-Filter Generator
Frosted-glass panel, blur and saturation.
CSS Beautifier
Readable indentation for messy or minified CSS, nesting included.
CSS Border Generator
Style, width, colour, radius, per side.
CSS Button Style Generator
Colours, padding, hover and focus states, with contrast checks.
CSS Clip-Path Generator
Drag, add or remove points to shape a polygon, from 11 presets.
CSS Container Query Generator
Responds to a container's size, not the viewport.
CSS Counter Generator
Auto-numbered lists, including 1.1-style nested numbering.
CSS Custom Properties Auditor
Audit your CSS variables for unused or undeclared ones
CSS Custom Properties Generator
A :root block of variables from your list.
CSS Filter Generator
Blur, brightness, contrast, sepia and more.
CSS Grid Generator
Visual grid playground, with a responsive auto-fit option.
CSS Loader/Spinner Generator
Accessible ring, dots or bars loaders, HTML + CSS included.
CSS Logical Properties Converter
Convert physical CSS, including shorthands, to logical properties.
CSS Minifier
Shrink CSS safely, keeping strings, data URIs and licences intact.
CSS Print Stylesheet Generator
Pick what to hide or change on paper.
CSS Reset/Normalize Generator
Pick exactly the rules you want.
CSS Scroll-Snap Generator
A snapping carousel, live and scrollable.
CSS Scrollbar Styler
Custom scrollbar, live preview.
CSS Shape Generator
Ready-made pure-CSS shapes.
CSS Specificity Battle
Two selectors, one clear winner, using current CSS rules.
CSS Specificity Calculator
Score any selector, including :is(), :not(), :has() and :where().
CSS Transform Playground
Build a CSS transform with live sliders
CSS Unit Converter
px, rem, em, %, pt, vw and vh, all in sync.
CSS Writing Mode / Vertical Text Generator
Generate CSS for vertical text
Cubic-Bezier / Easing Generator
Drag a timing curve and preview the easing.
Custom Cursor Generator
Turn any image into a correctly sized CSS cursor with a hotspot.
Custom Toggle Switch Generator
An accessible CSS on/off switch built from a checkbox.
Dark Mode Toggle Snippet Generator
Flash-free light/dark CSS and toggle, with contrast checks.
Flexbox Generator
Visual flex container playground.
@font-face Snippet Builder
Correct @font-face rules, including variable fonts.
Font Pairing Previewer
Heading/body combinations, live.
Glassmorphism/Neumorphism Generator
Frosted-glass or soft-UI cards, with adjustable blur, opacity and depth.
Grid Template Areas Visual Builder
Name each cell, get the layout CSS, with shape checks.
Media Query Generator
A @media block from a breakpoint, in classic or range syntax.
Section Divider / Wave Shape Generator
Build a wave, curve, tilt or zigzag divider between sections.
Text Gradient Generator
Build a CSS gradient clipped to text.
Text Shadow Generator
Build and preview a text-shadow visually.
Unused CSS Selector Finder
Find selectors that match nothing in your HTML, :hover included.
Free CSS generators and calculators for everyday front-end work
Stop guessing at values and tweaking them in DevTools. These tools let you build the effect visually and copy CSS that works in every current browser. Shape layouts with the Flexbox Generator, the Grid Generator (including a responsive auto-fit mode) and the Grid Template Areas Builder, which warns you before you copy an area the browser would reject. Make type and spacing fluid with the Clamp() Calculator, convert between px, rem, em and viewport units with the CSS Unit Converter, and get the exact proportions of any image or video with the Aspect Ratio Calculator.
For visual polish there's a Box-Shadow Generator, a Clip-Path Generator with draggable points, a Cubic-Bezier Easing Generator with a live curve, frosted-glass panels from the Glassmorphism Generator and section dividers from the Wave Divider Generator. Accessibility is built in rather than bolted on: the Button Style Generator and Dark Mode Snippet Generator check colour contrast as you type, and the Toggle Switch and Loader Generator produce markup screen readers understand.
When you're working with existing code, the Specificity Calculator explains why a rule isn't applying, the Unused CSS Selector Finder and Custom Properties Auditor track down dead code, the Logical Properties Converter gets a stylesheet ready for right-to-left languages, and the CSS Minifier and CSS Beautifier shrink or tidy it without breaking strings or data URIs. Everything runs in your browser, so the code you paste never leaves your device.
Questions and answers
- What's the difference between the Specificity Calculator and the Specificity Battle?
- The Specificity Calculator scores one selector, or every selector in a list, and shows which part of it contributes what, so it's best for understanding a single rule. The Specificity Battle puts two selectors side by side and tells you which one wins and why, which is quicker when you're working out why one rule is overriding another. Both use the current rules for :is(), :not(), :has() and :where().
- Should I use the Flexbox Generator, the Grid Generator or the Grid Template Areas Builder?
- Use flexbox for a single row or column of items, such as a navigation bar or a row of buttons, where the items' own sizes matter. Use the Grid Generator for a two-dimensional arrangement of equal tracks, such as a card gallery; its responsive option fits as many columns as there's room for. Use the Grid Template Areas Builder for a whole page or component layout with named regions such as header, sidebar and footer.
- Should I use px, rem or em?
- Use rem for font sizes and most spacing: it's based on the root font size, so everything scales when someone increases their browser's default text size, which helps people with low vision. Use em when something should scale with its own text, such as the padding inside a button. Px is fine for borders, shadows and other fine details that shouldn't grow. The Unit Converter and the Clamp() Calculator both work in rem by default.
- Will the CSS Minifier break my stylesheet?
- It shouldn't. It protects text inside quotes and url() values, keeps the space in descendant selectors such as ".nav :focus" (removing it would change the meaning), leaves calc() alone and keeps /*! licence comments by default. For a production build, a tool such as Lightning CSS or cssnano can go further by merging rules, but for one-off files, snippets and email templates the minifier is safe and quick, and the Beautifier reverses it if you need to edit later.
- Why does the Unused CSS Selector Finder say a class is unused when I know it's needed?
- It only knows about the HTML you paste in. Classes added by JavaScript, used on other pages or inserted by a CMS will show as unused even though they're needed elsewhere. Selectors with :hover, :focus or ::before are checked without that part, so ".card:hover" counts as used when a .card exists. Treat the unused list as candidates to investigate, not a list to delete blindly.