15 tools
Frontend, CSS & Design Tools
Fifteen frontend tools with live previews: gradients, box shadows, border radius, clamp() and fluid type, grid and flexbox, animations and transforms, selector specificity, SVG path optimisation, data URIs, icon sprites, design tokens and Tailwind.
About these tools
Each generator produces standard CSS you can read and paste, with a live preview on real elements and no framework required. Where a value affects accessibility - fluid type that stops text zooming, animation without a reduced-motion rule - the tool warns you and includes the fix in the output.
Converters for SVG, design tokens and Tailwind report what they could not translate instead of guessing. SVG you paste is sanitised before it is previewed, and nothing leaves your browser.
Popular tasks
All Frontend, CSS & Design Tools
- CSS Gradient Generator Design linear, radial and conic CSS gradients with draggable colour stops, hints, angles and repeating modes, preview them on real elements, and copy clean CSS with an optional solid fallback.
- CSS Box Shadow Generator Build CSS box shadows with multiple layers, offsets, blur, spread, inset and colour opacity, preview on light and dark backgrounds, and copy box-shadow or a matching drop-shadow filter.
- CSS Border Radius Generator Shape corners with per-corner and elliptical border-radius values in px or %, including the eight-value slash syntax for organic blob shapes, with a live preview and shorthand CSS.
- CSS Clamp Calculator Generate a CSS clamp() expression that scales a value linearly between a minimum and maximum across two viewport widths, in px or rem, with the slope and intercept shown and a zoom-safety check.
- Fluid Typography Calculator Build a fluid type scale: base size and ratio at a small and a large viewport, generating clamp() font sizes for every step as CSS custom properties, with a live preview and WCAG zoom check.
- CSS Grid Generator Lay out a CSS grid visually: columns and rows with fr, minmax() and repeat(auto-fit), gaps, named template areas drawn on the grid, and copy the container and item CSS.
- Flexbox Playground Experiment with flexbox: direction, wrap, justify-content, align-items, align-content and gap on the container, and grow, shrink, basis, order and align-self per item, with live results and CSS.
- CSS Animation Generator Create CSS keyframe animations with a timeline of steps, easing and cubic-bezier editor, duration, delay, iterations and fill mode, with a prefers-reduced-motion fallback included in the CSS.
- CSS Transform Generator Compose CSS transforms - translate, rotate, scale, skew and 3D rotation with perspective and transform-origin - see the order matter live, and copy the transform or the equivalent matrix().
- CSS Specificity Calculator Calculate the specificity of CSS selectors, including :is(), :not(), :has() and zero-specificity :where(), compare selectors to see which wins, and paste a whole stylesheet to find the heaviest rules.
- SVG Path Optimizer Optimise SVG path data: parse every command, convert between absolute and relative, reduce decimal precision, drop redundant commands, and compare the before-and-after rendering and byte size.
- SVG Data URI Converter Convert SVG markup to a data URI for CSS or HTML, using the shorter URL-encoded form or Base64, with size comparison, ready-to-paste background-image CSS and sanitisation of scripts and handlers.
- SVG Icon Sprite Generator Combine many SVG icons into one symbol sprite: ids from file names, preserved viewBox, cleaned attributes, optional currentColor fills, and the use snippets and preview page to go with it.
- Design Token Converter Convert design tokens between the W3C DTCG JSON format and CSS custom properties, SCSS variables, a JS/TS object or a Tailwind theme, resolving aliases and reporting anything that cannot be translated.
- Tailwind Class Converter Convert Tailwind utility classes to plain CSS declarations, including responsive and state variants, or map plain CSS to the nearest default Tailwind utilities, listing anything without an equivalent.
Newly added
Related A2Z.Tools utilities
- CSS Formatter
- CSS Minifier
- Color Code Converter
- Color Palette Extractor
- SVG Editor and Viewer
- CSS Z-Index Generator
Other tool collections
- AI & LLM Developer Tools
- Website Performance & Accessibility Tools
- API, Data & Developer Tools
- SEO, GEO & Ecommerce Tools
- Business & Operations Tools
- Career, Resume & HR Tools
- Education & Research Tools
- Writing, Publishing & Localization Tools
- Email, Marketing & Creator Tools
- Finance & Investment Tools
- Home, Construction & Energy Tools
- Travel, Location & Geography Tools
- PDF, Document & Spreadsheet Tools
- Mobile, Cloud & DevOps Tools
Rate this tool
Was this tool useful? Your feedback helps us improve it.
No ratings yet — be the first to rate this tool.