---
title: "Brick Mosaic — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Nostromo Studio · Sections. Brick Mosaic turns any photo into a mosaic of pixel-art building bricks, inspired by LEGO ®."
canonical: "https://framer.elliotli.dev/component/brick-mosaic"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Brick Mosaic

# Brick Mosaic

Pixel Art, Inspired by LEGO®

[View on Framer](https://framer.com/marketplace/components/brick-mosaic/?via=elliot-li)

![Brick Mosaic preview image 1](https://framer.elliotli.dev/og/component/brick-mosaic/c4e0ef9039dd6e4e/1600x1200.jpg)

## Summary

Brick Mosaic turns any photo into a mosaic of pixel-art building bricks, inspired by LEGO ®.

## Description

**Brick Mosaic** turns any photo into a mosaic of pixel-art building bricks, inspired by LEGO®. Drop in an image and it's resampled into a grid of individually colored 1x1 brick tiles, complete with studs, bevel shading, and a shadow that follows the mosaic's real shape — not a filter, a genuine per-brick recreation of your photo.

## Key Features

### Image

-   Upload any photo — resampled live into a brick mosaic
    
-   Cropped to match the component's aspect ratio, like a standard cover-fit image
    

### Bricks

-   Brick Size from 8px to 60px controls how many bricks appear, i.e. how much detail shows
    
-   Studs toggle for a flatter, more graphic look
    
-   Stud Shadow fine-tunes the cast shadow on each stud — lower it on light-colored bricks where it can look too strong
    

### Layout & Style

-   Crop to Fill: fill the frame edge to edge for a full-bleed hero, or keep whole, uncropped bricks with a thin margin
    
-   Native Shadow control, applied per brick so it traces the mosaic's actual silhouette instead of a plain rectangle — works great with transparent PNGs/SVGs
    

## Usage Notes

**Browser performance:** Brick Mosaic uses native CSS `box-shadow` on each individual brick to create its shading and depth. Since every brick is rendered separately, mosaics with a high brick count can be demanding on browser resources — especially when using multiple Brick Mosaic instances on the same page. For the best browsing experience, we recommend using the effect sparingly and avoiding too many large or highly detailed mosaics on a single page.

It takes a moment to load the blocks. We therefore recommend using this effect further down on your page, or using a fade-in animation with a slight delay.

## How to Set Up

1.  Drag Brick Mosaic onto your canvas
    
2.  Upload or choose an image
    
3.  Adjust Brick Size
    
4.  Publish
    

## Refund Policy

All sales of digital products are final and non-refundable. Questions? Contact [hellonostromostudio@gmail.com](mailto:hellonostromostudio@gmail.com) before purchasing. Enjoy!

## Rank history [How rankings work →](/terms#rankings)

-   All · #6072

## Details

- **Author**: Nostromo Studio
- **Price**: $8.00
- **Published**: 2026-08-11
- **Updated**: 2026-08-19
- **Added**: 2026-08-11
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes