Unboilerplate LogoUnboilerplate
Give a StarPlayground
LogoUnboilerplate
✦ PURE CSS CREATIVE ENGINE

CSS is boring.
Your designs shouldn't be.

Rich visual defaults. Zero config. No build gymnastics.
Pure creative freedom — on tap.


🕹 Retro Systems

The Time Machine

Bringing back the personality of the early web — now GPU-accelerated.

Open in Playground →
★ UNBOILERPLATE TIME MACHINE: GPU MARQUEE • PAUSES ON HOVER • NO MATH • OLD SCHOOL COOL • VISITORS WELCOME ★
NETSCAPE_1995.EXE
★ BEST VIEWED IN NETSCAPE ★

Pristine beveled Windows 95 UI with realistic active press feedback.

VISITORS:004299
.window-95
[TERMINAL_V1]● ONLINE

> Phosphor scanline simulation on GPU.
> Zero boilerplate detected.
> Aesthetic index: 100%

.crt-screen
1. Unboilerplate - Symphony of Vibes.mp3
03:42

🎲 3D Spatial CSS

3D Spatial Dimensions

Hardware-accelerated perspective transforms and tactile physical interactions. Pure CSS.

Try in Playground →
3D PERSPECTIVE

Hover to Flip

GPU composited 180° rotation

180° Back Face

Single class. Zero script runtime.

.btn-3d

Physical Tactile 3D Buttons

Real extruded depth & press-down spring
Active spring physics built-in
.book-3d

Interactive 3D Book

Hover or click to turn realistic pages in pure CSS
VOL. IThe Tactile WebA pure CSS interactive tome
Hover or click to open 📖

I. The Paper

Realistic aged parchment gradient with natural fiber crease shadows.

II. The Physics

Staggered cubic-bezier page-turn deceleration with natural paper weight.

III. Zero JS

100% pure hardware-accelerated 3D transforms. No JavaScript needed.

IV. Your Turn

Add .book-3d to any element to craft your own interactive storybook.

transform-style: preserve-3d • Click or hover

⚙️ Override System

Total Design Freedom

"Unboilerplate gives you a starting point. You decide the destination."

Test Overrides →
METHOD 1: CSS VARIABLES

Override With Custom Properties

Adjust any property directly on the element without breaking the class architecture.

Custom Styled Cardstyle="--card-bg: ...; --card-radius: 12px;"
METHOD 2: CONIC GRADIENT GLOW

Conic Glow Card

Continuous 360° gradient border rotation powered by CSS keyframes.

360° Rotation

Infinite spinning gradient border

🎨 Creative Universe

Pure CSS Canvas

Art supplies for the web. Layer graphics like Photoshop, retro sites, and 3D celestial particles.

Playground
LAYER SANDWICH & BLEND MODES

Photoshop-Grade Canvas

Stack layers with .canvas, .layer-back, .layer-mid, and pure CSS blend modes.

PURE ART
.blend-screen.layer-front
3D PARTICLES

Zero-JS Spatial Motion

Floating stars, rising bubbles, and orbiting cosmic bodies directly in HTML.

💫
3D Particle System

🎭 Aesthetic Worlds

Design Movements

Why should every web app look like a generic corporate dashboard? Switch aesthetics with a single class.

.brutal-neo

Neo-Brutalism

Hard drop shadows, thick black borders, and high-contrast confidence.

.card-wood

Skeuomorphism

Physical tactile realism with stitched leather and rich mahogany grain.

.vapor-sunset

VAPORWAVE

80s retro grid horizon, chrome typography, and neon sunset dusk gradient.


🎨 Artwork & Attribution

Credits & Inspiration

Honoring the artists and creative communities who inspire the visual soul of Unboilerplate.

HERO ARTWORK

Hero Animation Art

The hero backdrop animated visual art is created by the talented artist bzdmrsam on Pinterest.

PHOTOGRAPHY

Unsplash Photography

Exhibition canvases, polaroids, and editorial photography provided freely by independent global creators via Unsplash.


✦ For the builders

Crafted For Creators

For the designer who wants rapid prototyping. For the developer who wants rich visuals without bloat. For the creator with big ideas and zero patience for boilerplate.

Unboilerplate is yours. ✨


Launch Playground →Class Cheatsheet →Full API Reference →
Copied to clipboard