► PIXEL.ART CSS v1.0 ◄

PIXEL.ART
CSS FRAMEWORK

Professional pixel-art frame styles

// 01. PIXEL FRAMES

px-frame (3D raised)

Standard pixel
frame. Inset bevel.

px-frame-neon (synthwave)

Neon cyan border
+ purple glow.

px-frame-gb (Game Boy)

GAME BOY
STYLE

px-frame-inset (sunken)

Sunken inset.
Pressed state.

// 02. PIXEL WINDOWS

SYSTEM.EXE _ □ ✕

HELLO WORLD!
PRESS START
TO CONTINUE...

SYNTH.WAVE _ □ ✕

NEON WINDOW
SYNTHWAVE MODE
ACTIVE ■

// 03. PIXEL BUTTONS

// 04. PIXEL BADGES

NEON HOT GOLD LIVE ERROR GAME BOY ● REC

// 05. PIXEL PROGRESS BARS

HP — Green
MP — Blue
DANGER — Red
NEON — Animated

// 06. PIXEL SHADOWS

px-shadow-1 (outline)
SHARP
px-shadow-4 (3D raise)
3D NES
px-shadow-5 (deep drop)
DEEP
px-shadow-6 (neon glow)
GLOW
px-shadow-7 (double border)
WINDOW

// 07. PIXEL COLOR PALETTE

NES Palette
Game Boy
Synthwave Neons
CGA

// 08. PIXEL TEXT EFFECTS

px-text-shadow (hard drop)

PIXEL SHADOW TEXT

px-text-shadow-neon

NEON GLOW TEXT

px-text-outline

OUTLINED TEXT

px-text-rainbow

RAINBOW TEXT

VT323 — terminal font

C:\> BOOT SEQUENCE COMPLETE_

// 09. PIXEL BACKGROUNDS

px-bg-grid
px-bg-checker
px-bg-stars

// 10. PIXEL ANIMATIONS

👾
px-anim-float
⭐
px-anim-spin
♥ px-blink
px-shake (hover)
px-bounce (hover)

// 11. PIXEL TOOLTIP

HOVER ME AND ME ME TOO

// 12. 🪄 MAGIC MODE (ZERO-CODE)

The elements below are standard HTML tags (<button>, <input>, <h2>).
Click the button to inject data-pixelart="true" and watch them transform!

Standard H2 Tag

Standard P tag (inherits font from container or body)

Standard Link