Show your numbers with pride.
Paste Lighthouse scores, Core Web Vitals or a bundle-size readout and Codeshot colors them by threshold — green for great, amber for okay, red for needs-work — ready to share.
- Input:
- Metric labels & values
- Output:
- PNG, SVG, clipboard
- Cost:
- Free
- Account:
- Not required
- Processing:
- In your browser
What is the Performance Metrics generator?
A performance metrics image tool colors Lighthouse scores, Core Web Vitals and bundle sizes by threshold — green for great, amber for okay, red for needs-work. Turn a benchmark or audit into a shareable image for a launch post, a report or a brag.
Codeshot is free and runs entirely in your browser — no account, no watermark, and nothing you paste is uploaded. Export a retina PNG or a scalable SVG, or copy the image straight to your clipboard.
When to use it
- Launch and performance posts
- Lighthouse and audit reports
- Before/after optimization results
- Stakeholder status updates
Why use Codeshot for performance metrics image?
Threshold coloring
Scores of 90+ turn green, 50–89 amber and below red, just like Lighthouse.
Sizes & timings
kB, MB, ms and seconds are highlighted so readouts read at a glance.
Brag-worthy
Share a launch's metrics as a clean image instead of a cropped screenshot.
How to turn performance metrics into an image
- 01
Paste the metrics
Drop in Lighthouse scores, Web Vitals or bundle sizes.
- 02
Frame the shot
Pick a theme, backdrop and font.
- 03
Export & share
Save a PNG or SVG, or copy to clipboard.
Performance Metrics — frequently asked questions
How are scores colored?+
By Lighthouse-style thresholds: 90 and above is green, 50 to 89 is amber, and below 50 is red. Sizes and timings are highlighted in amber.
What can I paste?+
Any label-and-number readout — Lighthouse categories, Core Web Vitals, bundle sizes or your own benchmarks.
What can I export, and is it free?+
Export a high-resolution PNG or a scalable SVG, or copy straight to your clipboard. Codeshot is completely free — no account, no watermark, no limits.
Do I need an account or any software to install?+
No. Codeshot runs entirely in your web browser — there is nothing to download or install, and no sign-up, login or email is required. Open the page, paste your content and export.
Can I use the exported images commercially?+
Yes. You keep all rights to the content you paste and the images you create, and you can use them in commercial blog posts, courses, slides, documentation and social media at no cost. There is no watermark on any export.
Can I customize the theme, font, background and size?+
Yes. Choose from a dozen real editor themes (Dracula, Night Owl, One Dark, GitHub and more), premium self-hosted fonts, gradient, solid or transparent backdrops, light or dark window modes, and adjustable padding, font size, shadow and window controls.
Does Codeshot work on mobile and in every major browser?+
Codeshot works in modern browsers on desktop and mobile, including Chrome, Firefox, Safari and Edge. A larger screen makes fine-tuning the frame easier, but you can create and export an image from a phone or tablet too.
Explore all 17 Codeshot tools
One studio, 17 focused generators — each with its own controls, content and look.