Add objects to the stage
Choose from planes, cubes, cylinders, containers, or lights. Set dimensions and a base color, then position the object in 3D space.
CSS-3D.COM
Compose CSS 3D scenes visually and export clean HTML + CSS.
Place planes, cubes, cylinders, and lights on an interactive 3D stage. Tune transforms and per-face materials in the inspector, then download a ready-to-use HTML & CSS bundle — no WebGL, no JavaScript required.
5CSS3D shape types
100%HTML & CSS output
Ctrl+Z10-step undo history
Workflow
From blank stage to a downloadable HTML + CSS bundle.
A focused three-step loop: add objects, configure materials and transforms, then export clean code.
Tune position and materials
Select any object to edit its transform, per-face colors, image background, or video fill. Orbit the viewport to preview from any angle.
Export the scene
Click Export to download a clean HTML + CSS bundle. Toggle 360° rotation to add a looping keyframe animation directly in the CSS output.
Flat planes
Place and rotate rectangular planes in 3D space. Apply a solid color, image URL, or looping video as the surface fill.
6-face cubes
Each face of a cube gets its own color, opacity, and background — including image and video fills applied per-face independently.
Cylindrical shapes
Smooth cylinders built from configurable polygon segments, each panel with per-segment brightness driven by any light in the scene.
Point light sources
Drop a light object into the scene to drive distance-based illumination. Brightness values are baked into the exported CSS automatically.
Orbit viewport
Drag to rotate the camera, scroll to zoom, pan to reposition. The exact viewport angle is captured and written into the exported CSS transform.
Cloud save & sharing
Sign in with GitHub to save up to 5 scenes to the cloud. Make any scene public and share a live preview link with anyone.
What you can build
Real scenes made with the CSS-3D editor.
Live showcase scenes loaded from Firestore. Click a card to open the full preview.
Could not load showcase scenes right now.
Top Rated
highest rated public projects.
Discover the best community scenes based on star ratings.
Could not load top rated projects right now.
Community
Scenes shared by CSS-3D creators.
Real scenes made and published by the community. Click any card to preview, orbit, and rate.
Could not load community scenes. Check back soon.
Get in touch
Need help with CSS-3D scenes?
Share what you are building, ask for a feature, or send feedback about the editor. We will route your message through your default mail app.
Talk to the CSS-3D team
Whether you are building a landing page hero, interactive product cube, or full CSS-only 3D environment, send over your idea and we will get back to you.
- Feature requests and product feedback
- Help with exports and scene building
- Partnerships and creative collaborations
FAQ
Back to topHow CSS-3D Studio works.
Do I need to know CSS 3D transforms?
No. The builder handles all the math. You control position and rotation with numeric inputs, and the correct translate3d, rotateX, rotateY, rotateZ CSS is generated automatically.
What exactly does the export include?
You download a ZIP with one HTML file and one CSS file. Every object becomes an absolutely-positioned div with the correct transforms, backgrounds, and — if you toggle it — a @keyframes 360° rotation animation.
Do I need to sign in to use the builder?
Yes, GitHub sign-in is required to open the builder and save projects. Saved scenes can be made public and shared as a live preview link. Each account can hold up to 5 projects (3 public, 2 private).
Can the output be used in any framework?
Yes. The export is plain HTML and CSS with no framework dependencies. You can paste it into Angular, React, Vue, or a static HTML page without modification.