WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Cylinders Grid Background 3D
1127
VietStrix
Open In Editor
Publish Your Code
Recommended
20 September 2025
FLORES AMARILLAS JEJE
24 May 2025
Neumorphism Dark Submit Button
2 July 2025
Mete'nin bir kodu
HTML
Copy
Document
VietStrix
Grid
CSS
Copy
/* Copyright (c) 2025 by Kevin Levron (https://codepen.io/soju22/pen/QwLpBBa) */ body, html, #app { margin: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,0.5) 200%); } #app { height: 100%; font-family: "Montserrat", serif; } .hero { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } h1, h2 { margin: 0; padding: 0; color: white; text-transform: uppercase; text-shadow: 0 0 20px rgba(0, 0, 0, 1); line-height: 100%; user-select: none; } h1 { font-size: 80px; font-weight: 700; } h2 { font-size: 60px; font-weight: 500; } #webgl-canvas { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } <!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
import Grid2Background from 'https://cdn.jsdelivr.net/npm/threejs-components@0.0.17/build/backgrounds/grid2.cdn.min.js' const bg = Grid2Background(document.getElementById('webgl-canvas')) document.body.addEventListener('click', () => { bg.grid.setColors([0xffffff * Math.random(), 0xffffff * Math.random(), 0xffffff * Math.random()]) bg.grid.light1.color.set(0xffffff * Math.random()) bg.grid.light1.intensity = 500 + Math.random() * 1000 bg.grid.light2.color.set(0xffffff * Math.random()) bg.grid.light2.intensity = 250 + Math.random() * 250 // bg.grid.plane.material.color.set(0xffffff * Math.random()) })