HTML tools
Work with HTML, Pug, JSX, SVG components and CSS. Translate markup and styles for your next implementation.
21 tools in this category. Every tool runs in the browser and needs no sign-up.
SVG Path Editor
Shape an SVG path directly. Move anchors and curve handles, then copy the path or save your SVG.
SVG Optimizer
Optimize static SVGs locally with SVGO. Compare the result and download individual files or a ZIP.
SVG → JSX
Efficiently convert SVG files into React JSX code, streamlining the development process for dynamic and interactive web applications.
SVG → React Native
Leverage the power of React Native with this tool that converts SVG files into React Native components, enabling cross-platform mobile app development.
HTML → JSX
Transform HTML code into React JSX format for reuse and componentization within React projects, enhancing development efficiency and code quality.
HTML → Pug
Convert HTML to Pug (Jade) templates online. Choose fragment or full-document mode, tabs, attribute commas and quote style, and try examples for forms and documents.
Markdown → HTML
Transform Markdown files into HTML for displaying formatted text content on web pages.
Flexbox Generator
Arrange a real flex layout. Tune the container and each item, try different widths, then take the CSS, HTML, or Tailwind markup.
CSS Clip Path Generator
Sculpt a shape directly on the canvas. Drag polygon points, explore rounded shapes, and export CSS or an SVG.
Box Shadow Generator
Build depth one layer at a time. Move the light, tune softness and color, and copy a production-ready shadow.
CSS Grid Generator
Draw a CSS grid layout visually. Size columns and rows, drag across cells to name areas, and copy CSS, HTML or Tailwind.
Cubic Bezier Generator
Shape CSS easing curves by dragging two handles. Compare the motion with linear timing and copy cubic-bezier() for transitions or Tailwind.
Border Radius Generator
Round each corner, switch to elliptical radii and drag edge handles to sculpt blob shapes. Copy border-radius CSS or Tailwind.
Glassmorphism Generator
Create frosted-glass panels with backdrop-filter. Tune blur, transparency, saturation and border on a live background, then copy the CSS.
CSS Gradient Generator
Create linear, radial and conic CSS gradients with draggable color stops, an angle dial and presets. Copy the CSS or a Tailwind class. Free and instant.
CSS → JS Objects
Convert CSS files to JavaScript objects for easy use and manipulation of styles in front-end projects.
CSS → template literal
Transform object styles to template literals for optimized style application in frameworks like React.
CSS → TailwindCSS
Convert CSS to Tailwind CSS utility classes online. Paste CSS rules to get the matching classes as @apply, with rem base and configuration options (Tailwind v3 scale).
Less → CSS
Compile Less to CSS online with the official less.js compiler in your browser. Expands variables, nesting and mixins, with optional vendor prefixes — no lessc install needed.
Scss → CSS
Convert SCSS preprocessor files to standard CSS, simplifying the authoring and management of style sheets.
Sass → CSS
Convert Sass preprocessor files to standard CSS, enhancing the readability and reusability of style sheets.