Web, CSS & SVG Tools
Generate code and design parts with a live preview, then copy them straight into your project.
SVG to Data URI & Base64 Converter
Convert SVG to a URL-encoded or Base64 data URI, compare sizes, copy CSS, JSX, or Tailwind snippets, and decode data URIs back to SVG.
Dark Mode Color Generator
Turn a light color palette into dark mode colors, check WCAG contrast, and copy CSS variables.
Favicon Sizes Chart & Generator
Check favicon sizes for every device and generate favicon.ico, PNGs, apple-touch-icon, and a manifest.
SVG to Data URI & Base64 Converter
Convert SVG to a URL-encoded or Base64 data URI, compare sizes, copy CSS, JSX, or Tailwind snippets, and decode data URIs back to SVG.
Dark Mode Color Generator
Turn a light color palette into dark mode colors, check WCAG contrast, and copy CSS variables.
Favicon Sizes Chart & Generator
Check favicon sizes for every device and generate favicon.ico, PNGs, apple-touch-icon, and a manifest.
Category Overview
What Web, CSS & SVG tools can do for you
3 tools listed
The web, CSS and SVG tools help you build how a site or app looks. Generate CSS Grid layouts, gradients, hover effects, speech bubbles and ribbons from pseudo-elements, glassmorphism and neumorphism styles, easing curves, fluid typography with clamp(), and convert px to rem or em.
For SVG, preview and optimize files, convert to and from Data URIs, turn SVG into React or Next.js JSX components, build sprites from several icons and generate line-drawing animations. You can also create favicons in the recommended sizes.
For color and accessibility, convert between Hex, RGB and HSL, check text and background contrast against WCAG, simulate color vision differences and generate dark mode colors. Design tokens can be converted into CSS variables, Tailwind config or SCSS variables.
Handy when you need to
- ✓ Preview gradients and hover effects and copy the CSS
- ✓ Shrink SVGs and convert them to JSX
- ✓ Check text contrast against WCAG
- ✓ Prepare favicons and dark mode colors in one place
Pro tip
To make background artwork itself, see Design Asset Generators. For search-related settings, see SEO & Web Marketing.
Web, CSS & SVG: frequently asked questions
- Q. Can I use the generated CSS directly?
- A. Yes, you can copy the output. Test it in your target browsers and alongside your existing styles before you publish.
- Q. Which standard does the contrast checker use?
- A. It calculates the contrast ratio between text and background and checks it against WCAG levels.