Home
Generate text
Generate image
Sample code
About
Generate CSS that displays an image
JavaScript is disabled in your browser. You need to enable JavaScript to use the generator.
Select an image to upload:
Output style:
Pure CSS (original)
This generates only the CSS required to display your content. You must import it with a <link> or add it to a <style> block.
This option is flexible, but the top-left pixel will be the page's background color (not represented in preview).
Drop-in <div>
This generates <div> elements set with the
style attribute
, so that you can paste the output right into your HTML's <body>.
Use this option if you need to be sure the top-left pixel is set properly (see limitations).
Generator notes and warnings:
Large files take a long time to process.
I highly recommend downscaling, so your source image does not have a height or width over 1,000px.
Keep this tab in the foreground so your browser does not sleep the processing thread.
It may take additional time for you to select the output code.
Submit
Your image has
some
pixels to process.
Step 1: Extracting pixels from image:
0
Step 2: Writing pixels as box-shadow:
0
Encoded output:
Copy output
Render preview: