DevKit.tools

Directory

Every tool, in one place

166 tools across 14 sections. Each one says what it does and where it lives, and the whole card is a link, so finding a tool and opening it are the same click. Search below, or press Ctrl K from anywhere on the site.

Everything here is free, needs no account, and runs in your browser. The handful of tools that fetch a URL say so on their own page.

CSS

35 tools
Glassmorphism GeneratorCreate frosted glass cards with live sliders for blur, transparency, saturation and border. Copy clean CSS or Tailwind. Free, no signup.in CSSNeumorphism GeneratorGenerate soft UI neumorphic shadows with a light-source control, four shapes and live preview. Copy the CSS. Free, no signup.in CSSBox Shadow GeneratorBuild single or layered box shadows with offset, blur, spread, colour and inset controls. Live preview and copyable CSS. Free.in CSSText Shadow GeneratorCreate layered text shadows for neon glow, 3D extrude and retro effects. Live text preview with editable content. Copy the CSS free.in CSSHover Effect GeneratorBuild hover states with your own values for movement, scale, rotation, glow, ring and brightness. Works on cards, links, images and buttons.in CSSCSS Filter GeneratorApply CSS filters visually: blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert and opacity. Live preview, copy the CSS.in CSSCSS Gradient GeneratorBuild linear, radial and conic gradients with unlimited colour stops, angle control and live preview. Copy CSS or Tailwind classes free.in CSSMesh Gradient GeneratorCreate modern mesh gradient backgrounds from layered radial gradients. Click to place colour points, adjust spread, copy the CSS.in CSSCSS Pattern GeneratorGenerate seamless CSS background patterns: dots, grid, stripes, checkerboard, diagonal and graph paper. No images needed. Copy the CSS.in CSSGradient Text GeneratorApply a gradient to text with background-clip. Live preview with your own words, size and weight. Copy CSS or Tailwind.in CSSBorder Radius GeneratorControl all eight border-radius values independently to build organic blob shapes. Randomise, preview live, copy the CSS.in CSSClip Path GeneratorCut elements into triangles, hexagons, stars, arrows and more with clip-path. Fourteen ready shapes, live preview, copy the CSS.in CSSCSS Transform GeneratorCombine translate, rotate, scale and skew with live preview and a reference outline showing the original position. Copy the CSS.in CSSGradient Border GeneratorCreate gradient borders using padding-box and border-box backgrounds. Control width, radius, angle and up to three colours.in CSSDivider GeneratorCreate solid, dashed, dotted and gradient dividers, with an optional centred label. Copy the CSS and HTML.in CSSCSS Button GeneratorDesign buttons with padding, radius, gradient or solid fill, shadow and four hover effects. Live preview you can actually hover. Copy the CSS.in CSSNav Bar GeneratorBuild a navigation bar from five templates: simple, centred, split with CTA, floating glass and vertical sidebar. Edit links, colours, hover and active states.in CSSCard GeneratorDesign card components with padding, radius, border, gradient or solid background, shadow and an optional hover lift. Copy the CSS.in CSSTabs GeneratorBuild tab navigation in three styles with editable labels, colours, padding and an active state. Copy the CSS.in CSSTable GeneratorStyle data tables with header colours, stripes, borders, row hover and cell padding. Live preview, copy the CSS.in CSSAlert GeneratorBuild alert and callout boxes in four semantic variants and three styles. Editable title and body, copy the CSS.in CSSBreadcrumb GeneratorBuild breadcrumb navigation with five separator styles, colour control and an active last item. Copy the CSS.in CSSToggle Switch GeneratorBuild a toggle switch with size, knob inset, colours and animation speed. Clickable preview, copy the CSS and HTML.in CSSCheckbox GeneratorDesign custom checkboxes with size, radius, border width and colours. Animated check, clickable preview, copy the CSS.in CSSRadio Button GeneratorStyle radio buttons with size, border, dot size and colours. Animated selection, clickable preview, copy the CSS.in CSSTooltip GeneratorCreate tooltips on four sides with arrow, colours, padding and radius. No JavaScript needed. Copy the CSS and HTML.in CSSInput Field GeneratorStyle text inputs with padding, radius, border and a focus ring. Interactive preview showing the focus state. Copy the CSS.in CSSBadge GeneratorCreate badges in solid, soft and outline variants with an optional status dot. Control radius, padding and font size.in CSSChip GeneratorBuild chips and tags in three variants with an optional close button. Control radius, padding and font size.in CSSAvatar GeneratorDesign avatars with circle, rounded or square shapes, a ring, initials and a positionable status dot. Copy the CSS.in CSSProgress Bar GeneratorBuild progress bars with height, radius, gradient or solid fill and optional stripes. Live preview, copy the CSS.in CSSSkeleton Loader GeneratorCreate skeleton screens with shimmer or pulse animation, colour and speed control. Live preview, copy the CSS.in CSSScrollbar GeneratorStyle scrollbars with width, radius, track and thumb colours. Covers both the webkit and Firefox syntax. Live preview.in CSSLoader GeneratorGenerate CSS-only loading spinners: ring, dual ring, dots, bars, pulse and ping. Control size, colour and speed.in CSSCSS Animation GeneratorGenerate CSS keyframe animations: spin, pulse, bounce, float, shake, fade, slide, swing, flip and ping. Control duration, delay, easing and iterations.in CSS

HTML

13 tools
Text Input GeneratorGenerate accessible HTML input markup for text, email, password, number, date, file and range, with labels and validation attributes.in HTMLTextarea GeneratorGenerate textarea markup with label, rows, placeholder, maxlength and required. Live preview and copyable HTML.in HTMLSelect Dropdown GeneratorBuild select dropdowns from a simple list, with value and label pairs, multiple selection and required validation.in HTMLCheckbox and Radio GeneratorGenerate accessible checkbox and radio groups wrapped in a fieldset with a legend, each input paired with its label.in HTMLHTML Button GeneratorGenerate semantic button markup with type, disabled state and aria-label. Live preview and copyable HTML.in HTMLImage Tag GeneratorGenerate img markup with alt text, explicit dimensions, lazy loading and fetchpriority, optionally wrapped in a figure with a caption.in HTMLVideo Player GeneratorGenerate HTML5 video markup with poster, controls, autoplay, muted, loop and playsinline attributes.in HTMLAudio Player GeneratorGenerate HTML5 audio markup with controls, autoplay, loop and preload settings.in HTMLiframe GeneratorGenerate iframe markup with title, dimensions, lazy loading, sandbox and allowfullscreen.in HTMLHyperlink GeneratorGenerate anchor markup with target, rel, download and title attributes, with safe defaults for external links.in HTMLList GeneratorGenerate ul and ol markup from plain lines, with a start number for ordered lists.in HTMLHTML Table GeneratorGenerate accessible table markup with caption, thead, tbody and scoped header cells from simple comma-separated input.in HTMLAccordion GeneratorGenerate native collapsible sections with details and summary. Open by default optional. No JavaScript required.in HTML

SEO & Meta

13 tools
Meta Tag GeneratorGenerate SEO meta tags with a live Google result preview and character counters for title and description.in SEO & MetaOpen Graph GeneratorGenerate Open Graph meta tags with a live preview of how the link will look on Facebook, LinkedIn, WhatsApp and Slack.in SEO & MetaTwitter Card GeneratorGenerate Twitter card meta tags with a live mockup of the summary and large image card formats.in SEO & Metarobots.txt GeneratorGenerate a robots.txt with allow or disallow rules, crawl delay and a sitemap reference.in SEO & MetaUTM Campaign Link BuilderBuild campaign URLs with utm_source, utm_medium and utm_campaign so your traffic reports stay clean and consistent.in SEO & MetaKeyword Density CheckerSee which words and phrases dominate a page, spot accidental repetition, and check nothing is repeated to the point of stuffing.in SEO & MetaCanonical and Pagination Tag GeneratorGenerate canonical, prev, next and robots tags so paginated and duplicated pages consolidate their ranking correctly.in SEO & MetaHreflang Tag GeneratorGenerate hreflang tags as HTML, HTTP headers or sitemap entries, so each language and region version is served to the right visitors.in SEO & MetaXML Sitemap GeneratorTurn a list of URLs into a valid XML sitemap with last modified dates, change frequency and depth based priority.in SEO & MetaWebsite Health CheckAudit any page in one pass and get scores for SEO, accessibility, performance, security and mobile, with the exact fix for every issue.in SEO & MetaRedirect Chain CheckerFollow a URL through every redirect, see the status and timing of each hop, and catch loops, chains and mixed protocol jumps.in SEO & Metarobots.txt TesterPaste a robots.txt and test whether a URL is blocked, with the exact rule that decided it and why that rule won.in SEO & MetaSitemap ValidatorValidate a sitemap for XML errors, bad lastmod dates, relative URLs, duplicates and the limits search engines enforce.in SEO & Meta

Structured Data

7 tools

Social Media

13 tools
Connected AccountssoonNot available yet. Instagram and TikTok both require an approved app before they will let anyone read their own account figures, and that review is still in progress.in Social MediaChannel AnalyserPaste any YouTube channel URL and get real subscriber, view and engagement figures from the platform, plus a plain-language read on the account's health.in Social MediaThumbnail RaterUpload up to four thumbnails and get each scored for click-through potential, with a winner, the reason it wins, and specific changes to make.in Social MediaCaption GeneratorGenerate ready-to-post captions for Instagram, TikTok, LinkedIn, X and YouTube, each taking a different angle, with matching hashtags.in Social MediaHashtag GeneratorGenerate hashtag sets grouped by size so posts can actually rank, rather than drowning in tags that are too large to compete in.in Social MediaContent CalendarPlan a month of posts from your cadence and content pillars, edit every slot, and export to your calendar as an .ics file, CSV or JSON.in Social MediaCaption Length CheckerCheck a caption against each platform's real character limit, hashtag cap and the point where it gets cut off in the feed.in Social MediaImage Size GuideThe correct pixel dimensions for posts, stories, reels, thumbnails, banners and profile pictures on every major platform.in Social MediaHashtag AnalyzerCheck a hashtag set for duplicates, invalid characters, platform limits and tags too generic to be worth using.in Social MediaSocial Image Safe Zone CheckerDrop in an image and see it with each platform's own interface drawn on top, so nothing important sits under a caption or a button.in Social MediaCode to ImageRender a code snippet as a PNG with syntax colours, a window frame and retina scaling, drawn on a canvas so it is identical everywhere.in Social MediaYouTube Thumbnail DownloaderGet every thumbnail YouTube publishes for a video, in all available resolutions, and download any of them with one click.in Social MediaMeme Text GeneratorPut classic top and bottom text on any image, with the heavy outline that makes it readable, and download it at the image's full resolution.in Social Media

Image

10 tools

Text & Data

22 tools
JSON FormatterFormat, minify, validate and sort JSON in your browser. Errors point to the exact problem. Nothing is uploaded.in Text & DataBase64 Encoder and DecoderEncode text to Base64 and decode it back, with correct Unicode handling and a URL-safe variant.in Text & DataJWT DecoderDecode a JSON Web Token to read its header and claims, with expiry status. Decoding only, nothing leaves your browser.in Text & DataURL Encoder and DecoderPercent-encode text for URLs or decode an encoded string, with a choice of component or full URL encoding.in Text & DataCase ConverterConvert text between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, Title Case and sentence case at once.in Text & DataLorem Ipsum GeneratorGenerate placeholder text in paragraphs, sentences or words, with the classic opening line optional.in Text & DataDiff CheckerCompare two blocks of text or code line by line and see exactly what was added, removed and left alone.in Text & DataWord and Character CounterCount words, characters, sentences and paragraphs, with reading time and live checks against title, description and social limits.in Text & DataRegex TesterTest a regular expression against sample text, see every match highlighted with its capture groups, and preview a replacement.in Text & DataURL Slug GeneratorTurn a title into a clean URL slug with accent folding, a length cap that never cuts mid word, and optional stop word removal.in Text & DataText Cleaner and Line SorterRemove duplicate lines, sort alphabetically or by length, trim whitespace, strip blank lines and add numbering.in Text & DataString Escaper and UnescaperEscape text so it can be pasted safely into JSON, HTML, a JavaScript string, a regular expression or a CSV cell, and reverse it.in Text & DataCSV to JSON ConverterConvert CSV, semicolon or tab separated data into JSON, correctly handling quoted fields, commas inside values and typed output.in Text & DataMarkdown to HTML ConverterConvert Markdown to clean HTML with a live rendered preview, covering headings, lists, links, code blocks and quotes.in Text & DataJSON RepairRepair broken JSON in your browser: close unclosed brackets, strip trailing commas, quote bare keys and convert single quotes.in Text & DataJSON DiffCompare two JSON payloads and see exactly which fields were added, removed or changed, by path.in Text & DataJSON to Schema and ZodTurn a sample JSON payload into a draft-07 JSON Schema and a matching Zod validator, with email, URL and date formats detected.in Text & DataJSON to CSV ConverterConvert a JSON array into CSV, flattening nested objects into dotted columns and quoting values correctly.in Text & DataText ExtractorExtract every URL, email address, hashtag, mention, number, IP or date from a block of text, deduplicated and sorted.in Text & DataHTML to Text ConverterStrip HTML to readable plain text, keeping paragraph breaks and list markers, and optionally the link targets.in Text & DataSubtitle ConverterConvert subtitles between SRT, WebVTT and ASS, or extract the plain transcript, with the source format detected automatically.in Text & DataSubtitle Timing ShifterShift subtitles earlier or later, rescale for a frame rate change, and repair overlapping or too short cues.in Text & Data

Design

17 tools
Colour Palette GeneratorBuild a harmonious colour palette from one base colour using five colour theory schemes. Export as CSS variables or Tailwind config.in DesignContrast CheckerCheck colour contrast against WCAG AA and AAA, with live text preview and correct large-text thresholds.in DesignColour ConverterConvert a colour between HEX, RGB, RGBA, HSL and HSLA, and generate a tint and shade scale from it.in DesignTint and Shade Scale GeneratorTurn one brand colour into a full scale of tints and shades, with contrast ratios shown and Tailwind config output.in DesignColour Blindness SimulatorSee how two colours appear to people with colour vision deficiency and whether they remain distinguishable.in DesignCSS to Tailwind ConverterConvert a block of CSS into Tailwind classes, mapping the spacing scale and falling back to arbitrary values.in DesignTailwind to CSS ConverterConvert Tailwind classes into plain CSS, for when you receive Tailwind markup but need a real stylesheet.in DesignCSS Specificity CalculatorScore competing CSS selectors, visualise their specificity and find out which rule wins, with :is, :not and :where handled correctly.in DesignCubic Bezier Easing GeneratorShape a cubic-bezier timing curve, watch it animate against linear, and copy the CSS, Tailwind or Web Animations code.in DesignFlexbox PlaygroundSet flex-direction, wrap, justify-content, align-items and gap, watch the boxes move, and copy the CSS or Tailwind.in DesignCSS Grid GeneratorBuild a CSS grid with equal, auto-fit or custom tracks, see it laid out live, and copy the CSS or Tailwind.in DesignCSS Position PlaygroundSee exactly how each position value behaves, including which ancestor an absolute offset is measured from and why sticky sometimes does nothing.in DesignType Scale GeneratorBuild a modular type scale from one base size and a ratio, see every step at its real size, and export as CSS variables or Tailwind config.in DesignTailwind v3 to v4 Config MigratorConvert a tailwind.config.js theme into v4's CSS-first @theme block, with the parts that moved elsewhere called out.in DesignCSS Selector to XPath ConverterConvert selectors between CSS and XPath for Playwright, Selenium and Cypress, with ready made locator code.in DesignQR Code GeneratorMake a QR code for a link, wifi network, contact card or plain text. Generated in your browser, with no tracking redirect and nothing that can expire.in DesignIcon FinderSearch over 200 open source icon sets, recolour and resize, then copy the SVG, JSX or CSS. Every set's licence is shown with the icon.in Design

Security

9 tools

Calculators

11 tools
CSS Unit ConverterConvert pixels to rem, em, percent and points against any root font size, with a ready-made scale.in CalculatorsAspect Ratio CalculatorWork out the missing width or height for any aspect ratio, and get the aspect-ratio CSS to lock it in.in CalculatorsUnit ConverterConvert between metric and imperial length and weight, data sizes from bytes to terabytes, and time units.in CalculatorsCurrency ConverterConvert between more than 160 currencies with live exchange rates, refreshed hourly, including PKR, AED, SAR and INR.in CalculatorsPercentage CalculatorWork out a percentage of a number, what percent one number is of another, percentage change, and adding or subtracting a percentage.in CalculatorsDate Duration CalculatorCount the days, weeks, months and working days between two dates, and find the date a number of days from now.in CalculatorsTime Zone ConverterSee a single moment in time across major world time zones at once, with daylight saving handled for that specific date.in CalculatorsDownload and Upload Time CalculatorEstimate how long a file takes to download or upload at a given connection speed, including realistic protocol overhead.in CalculatorsUnix Timestamp and Date DebuggerConvert Unix timestamps to readable dates and back, with seconds and milliseconds told apart and every major time zone shown.in CalculatorsNumber Base ConverterConvert between binary, octal, decimal and hexadecimal with exact big integer maths and a bit by bit breakdown.in CalculatorsInvoice GeneratorBuild an invoice with line items, tax, discount and totals, then print it or save it as a PDF straight from your browser.in Calculators

Performance

10 tools
Cache-Control GeneratorBuild Cache-Control headers for hashed assets, images, HTML, APIs and private responses, with Next.js and nginx snippets.in PerformanceResource Hints GeneratorGenerate preload, preconnect, dns-prefetch and prefetch link tags, with guidance on when each one actually helps.in PerformanceLoad Time EstimatorEstimate transfer time for your page weight across slow 3G, fast 3G, 4G and cable, with a budget verdict.in PerformanceResponsive Image srcset GeneratorGenerate srcset and sizes markup, with a WebP source and correct width and height so the layout never shifts.in PerformancePage Weight and Load Budget CalculatorAdd up your page weight, see it against a performance budget, and estimate load time on slow connections.in PerformanceHTML Accessibility CheckerPaste HTML and get the accessibility failures that can be found in markup: missing alt and labels, broken heading order, duplicate ids and invalid ARIA.in PerformanceWeb App Manifest GeneratorGenerate manifest.webmanifest with icons, theme colours and display mode, plus the head tags and Next.js route.in PerformanceEmail HTML CheckerCheck email HTML against what Outlook, Gmail and Apple Mail actually support: unsupported CSS, Gmail clipping, missing alt text and dark mode problems.in PerformanceEmail Signature GeneratorBuild an email signature that renders correctly in Outlook, Gmail and Apple Mail, using nested tables and inline styles.in PerformanceEmail Deliverability CheckerCheck whether a domain is set up so its mail reaches inboxes. Reads SPF, DKIM, DMARC and MX, and counts the SPF DNS lookups that quietly break records past ten.in Performance

API & Testing

6 tools

Editor

1 tool

Media

1 tool

Where to start