CSS code to image
Turn a CSS rule into a shareable image with selectors, properties, and values colored for easy reading. From a tidy flexbox block to a custom-property trick, the snippet looks as good as the layout it describes. The image is composed on the page, so nothing about your stylesheet leaves the browser.
What you can do with a CSS snippet
- Share a layout trick or a modern selector on social
- Document a design-token block in your style guide
- Illustrate a CSS technique in a blog post
A CSS example
Here it is in the Cotton Candy theme — one of dozens. Open it in the editor to try others, tweak the background, and export, or paste your own CSS in its place.
styles.css
1.card {2 display: grid;3 gap: 1rem;4 padding: 1.5rem;5 border-radius: 12px;6 background: var(--surface);7}Your code stays on your device
gilika is built to render your CSS into an image right in your browser, so the snippet never has to be uploaded to a server. See exactly how.