A unusual ray tracer implemented purely in CSS — no pre-rendered images, no JavaScript for rendering, just cutting-edge CSS features! Runs live in your browser using the latest Chrome/Edge (Canary or Dev) with experimental flags enabled.
Live Pre-Built Demo: https://codepen.io/u2re-dev/pen/emYXLLM
You can change and edit compilable parameters.
- 🎨 Ray-Tracing-SCSS 🎨
- 🖨️ JS-DOM-Loader 🖨️
Such as:
- Your features or fixes
- Iteration count
- Enable (or not) reflections
- Possible CSS optimizations
- Rendering resolutions
- SCSS for easier and cleaner code management
- JavaScript is used only to generate the pixel grid markup (no rendering logic)
- Progressive (async) markup rendering for better performance
- Compiles to standard CSS — no custom build steps required
- Uses a 120x120 grid for pixel representation
- Advanced CSS math utilities and tricks
- CSS Custom Properties (fully editable)
- CSS Custom Functions (experimental)
- Latest CSS Math Functions
- CSS Typed OM
- SCSS for maintainability
Make sure to enable the
chrome://flags/#enable-experimental-web-platform-featuresflag.
npm install -Dnpm run dev
Suggested by AI
- Clone or download this repository.
- Open
index.htmlin your supported browser. - Enjoy the magic of pure CSS ray tracing!
- This project is a demonstration of what’s possible with modern and experimental CSS — expect things to break as browser support evolves!
- No pre-rendered images or JavaScript-based rendering: all visuals are computed in real-time by CSS.
📷 Old rendering without shading 📷
Made before re-design of main page. In this version I'm isn't enabled any shading.
These options isn't included in factory box. This test made in April of 2025 year. Currently, didn't made actual results.
What was enabled:
- reflections
- two iterations level (exclude first rays)
- higher pixel resolution...
As you can see:
- too expensive RAM usage
- roundly 1 minute to this frame
🖼️ Result Picture 🖼️
Have fun exploring the bleeding edge of CSS!