WebP tools.
Convert, compress and edit WebP files without uploading them.
Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.
Set up MCPEvery webp tools
- WebP to PNG converterTurn a WebP into a PNG that opens anywhere.
- WebP to JPG converterTurn a WebP into a JPG with the quality you choose.
- WebP to GIF converterTurn a WebP into a GIF with a palette of up to 256 colors.
- WebP to ICO converterTurn a WebP into a Windows icon or favicon with the sizes you pick in one ICO.
- WebP to Base64 encoderEncode a WebP as a raw Base64 string for an API body, a JSON field or a database column.
- WebP to data URI converterTurn a WebP into a data URI to inline in HTML, CSS or a JavaScript bundle.
- WebP compressorCompress a WebP, or convert a PNG or JPG to WebP, with the quality, size limit and longest side you choose.
- WebP texture generatorAdd dither, grain or static to a WebP to fix banding, add depth or set a mood.
- Convert to WebPConvert a JPG, PNG, GIF or AVIF to WebP and get a file 25 to 50% smaller at the same look.
- Next-gen image format converterClear the Lighthouse warning about next-gen formats: convert a JPG or PNG to WebP, 25 to 50% smaller at the same look.
- Reduce WebP file sizeShrink a WebP to a target size for an upload limit or a faster page.
- WebP for WordPressMake WebP files for a WordPress site: convert, set the quality and the width the theme needs, and upload a file that loads fast.
- WebP image quality reducerLower a WebP's quality to shrink the file, with a slider and a preview that shows exactly what each setting gives.
- WebP optimizerOptimize a WebP for the web: re-encode it at the quality and size the page needs and ship the smaller file.
- Add grain to a WebPAdd film grain to a WebP so a compressed image gets back the depth of film.
- Fix gradient banding in a WebPRemove the visible steps in a WebP's gradients with a light dither that viewers never see.
- WebP dithering toolDither a WebP: a little to smooth banding, a lot with a small palette for a retro pixel look.
- WebP noise overlay generatorMake a noise overlay once and blend it over any image in your editor: grain, static or colored noise at full density.
- WebP static effect generatorPut TV static over a WebP, from a weak signal to full white noise, for glitch art and VHS looks.
- Change WebP image colorsChange a color in a WebP for a site update, a theme or a variant.
- Replace a color in a WebP imageReplace one color in a WebP with another, exactly or with a tolerance, while every pixel keeps its transparency.
- WebP color editorEdit a WebP's colors in the browser when your editor won't open the format.
- WebP color replacerReplace colors in a WebP while its transparency stays intact, and download a PNG that opens anywhere.
- WebP icon color swapSwap a color across a set of WebP icons so they match the brand, or make hover and active states from one source.
- WebP recolor toolRecolor a WebP to make theme, brand or seasonal variants from one source, one color at a time.
- E-commerce product image toningGive a store's product photos one consistent tone, for the catalog or a seasonal campaign, without changing the white backgrounds.
- Hero image color effectsTone a hero image so the text over it reads and the brand's color carries the page.
- Social media image toningGive every social post one signature tone so the feed, the stories and the banners read as one brand.
- Thumbnail color tintingTint thumbnails with one bold color so a series is recognizable and stands out in a crowded feed.
- WebP color tone changerChange the color tone of a WebP, from a light tint to a full mood color, with its transparency kept.
- Website image color stylingTone a site's images to one palette so headers, backgrounds and stock photos read as one design.
- Hero section image fadeFade a hero image to transparent at the bottom or a side so it flows into the page content.
- Image hover state opacityMake the dimmed hover state of an image as a file, so galleries and product grids fade the picture and keep their overlays crisp.
- Lazy load placeholder opacityMake a ghosted placeholder from an image so lazy-loaded pictures fade in rather than pop in.
- Thumbnail gallery fadeFade a gallery's thumbnails so they read as clickable and leave room for icons and captions.
- WebP opacity changerSet a WebP's opacity, flat or as a gradient fade, and get a transparent PNG for overlays and backgrounds.
- Website background opacityTurn an image into a semi-transparent website background that adds depth without fighting the content.
- Remove a color from a WebPMake one color in a WebP transparent: a green screen, a blue backdrop or any solid color, with a tolerance for its shades.
- Remove the white background from a WebPMake a WebP's white background transparent, with a tolerance for off-white and a mode that keeps white inside the subject.
- Make a WebP transparentMake a WebP transparent by removing its background color, in the browser, with no watermark.
- WebP background removerRemove a solid background from a WebP: the color is detected, you set the tolerance, and the result is transparent.
- Make a WebP logo transparentMake a WebP logo's background transparent while the colors inside the logo, white included, stay.
- WebP to transparent PNG converterTurn a WebP into a transparent PNG: remove its background color and get a file that any software opens.
- WebP transparency creatorAdd transparency to a WebP by removing its background color, with a tolerance for shades and a preview of what goes.
Pricing
Build it with Pro
The tools are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds the product around them.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Production-ready React sections: hero, pricing, features, dashboards and more.
- Complete multi-page sites you can ship as they are.
- React icons from every major library, installable with one command.
- Presets that restyle every block, in light and dark.
- Lets your AI editor search, preview and install blocks for you.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: Basic usage
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: High usage
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: Unlimited usage
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
- Complete multi-page sites you can ship as they are.Templates: All 14 templates
- React icons from every major library, installable with one command.React icons: 294k+ icons
- Presets that restyle every block, in light and dark.Themes: All 59 themes
- Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Lets your AI editor search, preview and install blocks for you.MCP server: High usage
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
Build the product around them
Every block, template and icon, installed by your AI agent in your theme. The tools stay free.
Get Pro
Cancel anytimeKeep what you've shipped if you cancel