3D Effects is a pack of eight sets of CSS 3D effects, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .card, .btn, .btn-check, .badge and .form-switch where they fit, and Tailwind CSS 4 using its 3D transform utilities. The sets cover pointer-driven tilt cards with a glare, keycaps and push buttons with real depth, cubes and boxes, 3D text, isometric interface pieces, carousel rings, a dark neon set and a modern CSS set built on @property, :has() and container queries. Only the tilt cards and the carousel rings use JavaScript, a few lines each, and both still work without it.
A good 3D effect is decoration on top of something that already works. The text stays real text in the page, readable at whatever angle it ends up on, and any copies used to build depth are hidden from screen readers. Anything that reacts to the pointer should also react to keyboard focus, so a card that tilts on hover also tilts when a link inside it is focused. Nothing should keep rotating on its own: a spin starts only when the visitor asks for it, and under prefers-reduced-motion the movement stops or the component lays itself out flat. Faces that turn away should not hold focus, which is why the carousel ring makes them inert.
Free download Browse live demos All snippets
The sets
1. 3D Tilt Cards
An event pass with a holographic glare, a product card whose illustration, price and button sit on separate planes, and a row of feature cards with a gentler tilt.
A short script turns the card toward the mouse or pen and skips touch and reduced motion. Keyboard focus inside a card gives it a fixed tilt through :focus-within.
Live Demo CSS, Bootstrap & Tailwind code
2. 3D Keycaps and Push Buttons
Mechanical keycaps, formatting keys that stay down and light an LED, an inverted-T arrow cluster and round arcade push buttons on a dark panel.
Every key is a real button or checkbox. A solid shadow draws the lower edge, and :active or :checked moves the key down onto it, with no JavaScript.
Live Demo CSS, Bootstrap & Tailwind code
3. 3D Cubes and Boxes
A tea packet with six printed faces and a Spin the box switch, a six-face cube that turns to the step you pick, and box size radio cards with cardboard boxes.
Each solid is built from faces turned and pushed out with translateZ. The spin starts only when switched on and the switch is hidden under reduced motion.
Live Demo CSS, Bootstrap & Tailwind code
4. 3D Text Effects
A retro headline with bands of hard text-shadows, extruded block letters with a cast shadow, an isometric word with real sides and a word folded along its middle.
The real text stays in the heading and the copies that build the depth are aria-hidden, so each word is read once and can still be selected.
Live Demo CSS, Bootstrap & Tailwind code
5. Isometric UI Components
A stack of app cards that fans out, a cluster status card with server towers built as CSS solids, and slab tiles that lift on hover.
Everything sits on a plane turned with rotateX(55deg) rotateZ(-45deg) and no perspective, and keyboard focus triggers the same fan and lift as hover.
Live Demo CSS, Bootstrap & Tailwind code
6. 3D Carousel Rings
A ring of six destination cards with previous and next buttons, and a drum picker for pick-up times that turns on the X axis.
A short script sets the radius and turns the ring, and cards facing away are inert. Without JavaScript or with reduced motion both are flat lists.
Live Demo CSS, Bootstrap & Tailwind code
7. Neon 3D Effects
A synthwave event hero with a perspective grid floor and an extruded neon title, a layered membership card and a glowing wireframe cube beside a product link.
Nothing moves on its own; the card tilts and the cube turns on hover or keyboard focus. The Bootstrap version runs in data-bs-theme="dark".
Live Demo CSS, Bootstrap & Tailwind code
8. Modern CSS 3D Effects
A race medal turned by an angle registered with @property, a paper diorama whose perspective-origin follows the pointer, and a weather card with depth in cqi units.
:has() wires the controls and the hover grid without JavaScript, and @container switches the card to a wide layout. Older browsers get a static design.
Live Demo CSS, Bootstrap & Tailwind code
Frequently asked questions
Are these CSS 3D effects free for commercial projects?
Yes. Every set is free for personal and commercial projects, including client work and products you sell. Attribution is optional but always welcome. The licence is at uicookies.com/license/.
Do these 3D effects need JavaScript?
Six of the eight sets use none: the keycaps, cubes, text, isometric, neon and modern CSS sets run on CSS alone, with checkboxes and radios for their controls. The tilt cards use about 20 lines of vanilla JavaScript to follow the pointer, and the carousel rings use a short script for the buttons and the radius. Both work without it, as flat cards and flat lists. No set loads a library.
Are the 3D effects accessible?
The 3D is decoration: text stays real text, copies used for depth are aria-hidden, and decorative scenes are images with a text alternative. Effects that follow the pointer also respond to keyboard focus, every control has a name and a visible focus outline, and nothing rotates until the visitor starts it. Under prefers-reduced-motion transitions are removed, spin switches are hidden and the carousels lay out flat. Every set passes an automated axe-core WCAG 2.1 AA check.
Which frameworks are included?
Every set has three files that look the same: plain HTML and CSS, Bootstrap 5.3.8 and Tailwind CSS 4. The Bootstrap files use .card, .btn, .btn-check, .badge, .form-switch and the grid where they fit, with a small style block for the 3D. The Tailwind files use its transform-3d, perspective and backface utilities with arbitrary transforms, plus a style block only for keyframes, @property and a few background images.
How do I make a 3D cube in CSS?
Give a container a perspective, then put an element inside it with transform-style: preserve-3d and six absolutely positioned faces of the same size. Turn each face to its side with rotateY(0, 90, 180 or -90deg) or rotateX(90 or -90deg) and push it out by half the cube’s size with translateZ. Rotating the inner element then turns the whole cube, and set 03 does this with radio buttons, one per face, so no JavaScript is needed.
