# Frontend & Web Tools

> CSS gradients and shadows, clip-path, Flex/Grid, Tailwind palettes, meta tags, favicons, sprites, SVG optimization, XPath and more.

- URL: https://qilingtools.com/en/tags/frontend
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

## Tools (29)

- [Regex Tester](https://qilingtools.com/en/regex): Free online regular expression tester: match and highlight as you type, list capture groups and support the g/i/m/s/u flags. Runs locally, nothing uploaded.
- [Lorem Ipsum Generator](https://qilingtools.com/en/lorem): Free online Lorem Ipsum generator: classic Latin placeholder text or Chinese filler by paragraph, sentence or word, with one-click copy for mockups.
- [Color Converter](https://qilingtools.com/en/color): Free online color converter: convert between HEX, RGB and HSL with a built-in color picker and preview, one-click copy, computed locally in real time.
- [HTML Entity Encode/Decode](https://qilingtools.com/en/html-entity): Free online HTML entity encoder and decoder: escape < > & " and more to entities or decode them back, with optional non-ASCII conversion. Runs locally.
- [Image to Base64](https://qilingtools.com/en/image/base64): Free online image Base64 converter: turn an image into a Base64 string or Data URI with ready CSS and HTML snippets, or decode Base64 back to a file.
- [Favicon Generator](https://qilingtools.com/en/image/favicon): Free online favicon generator: turn a PNG, JPG or SVG into a multi-size favicon.ico plus Apple Touch, Android and PWA icons, a webmanifest and the HTML tags.
- [User-Agent Parser](https://qilingtools.com/en/user-agent): Free online User-Agent parser: browser and version, rendering engine, OS, device type and model, and bot detection for Googlebot, Bingbot and GPTBot.
- [CSS Formatter](https://qilingtools.com/en/css-format): Free online CSS beautifier and minifier: one declaration per line, correct @media, nesting and url() handling, optional property sorting and a byte count.
- [CSS Sprite Generator](https://qilingtools.com/en/image/sprite): Free online CSS sprite generator: pack icons into one sheet with bin packing, grid or row layouts and @2x support, and get the CSS positions, or slice one.
- [CSS Gradient Generator](https://qilingtools.com/en/css-gradient): Free online CSS gradient generator: build linear, radial and conic gradients visually with draggable stops, an angle dial and presets. Copy CSS or export PNG.
- [CSS Box Shadow Generator](https://qilingtools.com/en/css-shadow): Free online CSS shadow generator for box-shadow and text-shadow: stack layers with offset, blur, spread and colour, start from presets, copy CSS or Tailwind.
- [HTML Formatter](https://qilingtools.com/en/html-format): Free online HTML formatter: beautify or minify in one click, keep <pre> and <textarea> intact, format embedded CSS and JSON-LD, with a sandboxed live preview.
- [Keycode Finder](https://qilingtools.com/en/keycode): Free online JavaScript key event viewer: press a key to see event.key, code, keyCode, location and modifiers, with an on-screen keyboard and a reference table.
- [JavaScript Formatter](https://qilingtools.com/en/js-format): Free online JavaScript formatter: beautify or minify JS, TypeScript, JSX and JSON with 2/4-space or tab indent and line width. Handles regex, templates, ASI.
- [Meta Tag Generator](https://qilingtools.com/en/meta-tags): Free SEO meta tag generator & checker: title, description, canonical, robots, Open Graph, Twitter cards, hreflang, JSON-LD, with Google and social previews.
- [SVG Optimizer](https://qilingtools.com/en/svg-optimize): Optimize SVGs online: strip editor data and unused defs, compact path data, compare previews side by side, batch ZIP download, Data URI and React JSX export.
- [Bézier Curve Editor](https://qilingtools.com/en/math/bezier): Free online Bézier curve tool: pen out anchors and handles to join degree 3, 4 or 5 segments into any shape, morph between shapes, export SVG or PNG.
- [Color Contrast Checker](https://qilingtools.com/en/color-contrast): Check color contrast: WCAG 2.x ratio and APCA Lc, AA/AAA pass or fail for text and UI, nearest passing color, color-blindness preview and palette matrix.
- [Placeholder Image Generator](https://qilingtools.com/en/image/placeholder): Free placeholder image generator: custom size, colors and text with auto-fit font, PNG, JPG, WebP or SVG, batch sizes to ZIP, or copy a data URI or SVG.
- [Code Screenshot](https://qilingtools.com/en/code-screenshot): Turn code into beautiful images: auto-detected syntax highlighting, 10 themes, macOS window, line numbers, gradient backgrounds, PNG up to 4x or SVG.
- [CSS clip-path Generator](https://qilingtools.com/en/css-clip-path): Visual CSS clip-path maker: drag polygon points or use circle, ellipse and rounded inset. 25 presets (arrow, star, speech bubble) previewed on your image.
- [Flexbox & Grid Playground](https://qilingtools.com/en/flex-grid): Interactive Flexbox and CSS Grid playground: tweak container and item properties live, drag to name grid-template-areas, and copy CSS, HTML or Tailwind classes.
- [robots.txt & Sitemap Generator](https://qilingtools.com/en/robots-sitemap): Build robots.txt (block GPTBot, ClaudeBot and other AI bots in one click), test URLs with Google’s rules, and generate or validate sitemap.xml.
- [Tailwind Color Palette Generator](https://qilingtools.com/en/tailwind-palette): Turn a brand color into a Tailwind-style 50–950 scale on the default palette’s OKLCH curve, with contrast badges and v3, v4, CSS, SCSS and JSON export.
- [XPath & CSS Selector Tester](https://qilingtools.com/en/xpath-tester): Test XPath 1.0 and CSS selectors on XML or HTML: live highlighting, namespace prefixes, function results and shortest unique selectors for any clicked node.
- [Sprite Sheet Animator](https://qilingtools.com/en/image/sprite-animate): Animate sprite sheets online: auto-detect the grid, set frame order, fps and onion skin, export GIF, APNG, WebP or frames — or pack frames into a sheet + JSON.
- [CSS Animation Generator](https://qilingtools.com/en/css-animation): Build CSS @keyframes animations visually: 18 presets, a keyframe timeline, cubic-bezier and steps() easing, live preview, and copy CSS or Tailwind config.
- [Color Palette Generator](https://qilingtools.com/en/palette-generator): Press space for new color palettes, lock favorites, use OKLCH harmonies or image colors, check contrast and color blindness, export CSS, Tailwind, ASE.
- [SVG Wave & Shape Generator](https://qilingtools.com/en/svg-shapes): Generate SVG decorations: layered waves, random blobs, dot, hex and topographic patterns, layered peaks; gradients and seeds; export SVG, PNG, CSS or React.