Refract Tools started with a daily limit. I was halfway through auditing a client site, the tool I relied on told me I’d used up my free runs for the day, and I had a choice: pay for something I needed twice a month, or wait until tomorrow. Neither felt right for a job that takes a browser a few seconds.<\/p>\n\n\n\n
That moment kept coming back with other tools. A gradient generator that wanted an email address. An image compressor that uploaded every file to a server I knew nothing about. A favicon site so covered in adverts the download button was hard to find. None of these jobs are complicated, so I started building my own versions. Refract is where they live.<\/p>\n\n\n\n
Every tool is built around the same idea: you should see the result while you make it, then take the result away in one click.<\/p>\n\n\n\n
Some CSS is easy to write but hard to judge until you see it. These generators give you sliders, a live preview and clean code to copy.<\/p>\n\n\n\n
clamp()<\/code> rule instead of a pile of font-size media queries.<\/li>\n<\/ul>\n\n\n\nImage tools<\/h3>\n\n\n\n
Images are usually the heaviest thing on a web page, and preparing them is tedious. These three handle the jobs I find myself doing on almost every project.<\/p>\n\n\n\n
\n- Bulk image resizer<\/a>: resize, crop and compress a whole batch at once, then download them as a ZIP.<\/li>\n\n\n\n
- Image format converter<\/a>: move between PNG, JPG, WebP and AVIF, or turn an SVG into a high-resolution PNG.<\/li>\n\n\n\n
- Favicon generator<\/a>: a complete icon set from one logo, with the HTML tags to paste into your site.<\/li>\n<\/ul>\n\n\n\n
Your files stay on your device<\/h2>\n\n\n\n
This was the part I cared about most. When you drop a photo into the resizer, it isn’t sent anywhere. Modern browsers can decode, resize and re-encode images by themselves, so Refract hands the work to your browser and gives you the finished file. Once a tool page has loaded, you could switch off your Wi-Fi and it would carry on working.<\/p>\n\n\n\n
That matters when the images aren’t yours to share: client work under NDA, product shots ahead of a launch, or photos with location data baked in. As a bonus, the exported images have that location data stripped out. The privacy page<\/a> explains the details, including the analytics we use if you allow it.<\/p>\n\n\n\n