34 characters · free to copy
Block elements for text pixels
Unicode block U+2580 to U+259F holds 32 characters that fill a character cell in fixed fractions — quarter shades, eighth-height steps, halves and quadrants. They are the reason a terminal can draw a progress bar, a sparkline or a bar chart with nothing but text. Copy any character below; each is listed with its Unicode name and code point.
Shades
Four density steps from 25% to solid. The fastest way to suggest depth or dimming without colour.
Vertical eighths
Fills the cell bottom-up in eight steps. This is the sparkline and bar-chart set.
Horizontal eighths
Fills the cell left-to-right in eight steps — the progress-bar set. One cell of resolution becomes eight.
Halves and quadrants
Every combination of the four quarter-cells. Treat one character cell as a 2×2 pixel grid and these are all sixteen states.
Click any character to copy it. Nothing is downloaded — these are text characters, not images.
Unicode blocks
- U+2580–U+259F Block Elements
How to use Block Elements
Build a progress bar from the horizontal eighths
Draw the filled portion with █ and finish the partial cell with the nearest eighth. A 20-character bar suddenly has 160 steps of resolution instead of 20, so the bar moves smoothly rather than jumping.
Build a sparkline from the vertical eighths
Map each data point to one of ▁▂▃▄▅▆▇█ by its share of the maximum. An entire chart becomes one line of text that you can paste into a commit message or a log.
Use the quadrants as a 2×2 pixel grid
The sixteen quadrant combinations let one character cell carry four independent pixels, doubling effective resolution in both directions. This is how text-mode image renderers work.
Colour them like text, because they are text
A █ takes CSS `color` like any character, so a bar chart can be styled entirely in CSS with no canvas and no images. Set line-height to 1 so vertically adjacent blocks touch.
About Block Elements
The Block Elements block is the closest thing plain text has to a pixel. Each character fills a defined fraction of its cell — an eighth, a quarter, a half, or the whole thing — which means text can be used as a very low-resolution bitmap. The four shade characters ░▒▓█ came from code page 437 and were used for decades to fake gradients and dithering on displays that had no greyscale at all.
The eighth-step characters are the quietly brilliant part. Because they subdivide a cell into eight, a progress bar drawn in a 20-column terminal has 160 distinct states rather than 20. The bar advances smoothly instead of lurching, and it does so in a plain-text stream that can be piped, logged and copied. Nearly every modern CLI progress bar is built from U+2588 and its seven partial siblings.
The quadrant characters go further by treating one cell as a 2×2 grid, giving all sixteen on/off combinations. That doubles resolution horizontally and vertically at once, and it is the basis of terminal image viewers: map each 2×2 group of image pixels to a quadrant character, set the foreground and background colours, and a photograph renders in text.
This site uses the block elements as its primary drawing material. The Tetris pieces, the Breakout paddle and bricks, the Maze walls and the Snake body are all built from █ and its partial forms rather than from sprites, which is why every game inherits the page accent colour and stays crisp at any zoom level — it is type, so it scales like type.
Games drawn with these characters
Every board on this site is built from Unicode, not sprites. These ones use the characters above.
Frequently asked questions
How do I make a progress bar with Unicode block characters?
Draw the completed portion with the full block █, then render the leftover fraction with the nearest horizontal eighth (▏▎▍▌▋▊▉). Pad the remainder with spaces or light shade ░. Multiplying your percentage by eight and taking the remainder picks the right partial character.
Why is there a gap between my block characters?
Line-height. Block characters are drawn to the exact edge of the character cell, so any extra leading shows as a horizontal gap between rows. Set line-height to 1. If gaps appear between columns instead, the font is proportional rather than monospaced.
What is the difference between ░ ▒ ▓ and █?
They are four density steps of the same cell: light shade is roughly 25% filled, medium 50%, dark 75% and full block 100%. Because they are text, all four take your text colour — so you can get four apparent brightness levels out of a single colour.
Can I change the colour of block characters?
Yes. They are ordinary text characters, so CSS `color`, terminal ANSI colours and your editor theme all apply. That is the whole advantage over an image: one character can be any colour and any size, and it stays sharp at every zoom level.
Do block elements work in every font?
Support is essentially universal, but quality varies. Some fonts draw the eighth-blocks very slightly narrow, leaving hairline seams in a solid fill. Monospaced fonts built for terminals — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — draw them edge-to-edge and are the safe choice.
Support the arcade
Enjoying the games?
UnicodeGames is free, has no ads and never will. If it brightened a coffee break, you can return the favour.
Buy me a coffeeOne-off · No account needed · Handled by Buy Me a Coffee