Geometry Effects

Gradients that refract, slice, and warp in 3D

Glass-tile refraction. Column blinds. Mesh deformation. The dimensional effects you've been trying to fake—now they're real.

EveryEverygradientgradienttooltoolstopsstopsatatcolor.color.PickPickyouryourhues,hues,setsetananangle,angle,done.done.WeWebuiltbuiltstructurestructureintointothetheequation—tilesequation—tilesthatthatbendbendlight,light,columnscolumnsthatthatslice,slice,surfacessurfacesthatthatpushpushtowardtowardyou.you.

Grid Refraction

Light through
glass tiles.

That glass-tile refraction—the one that makes gradients feel like light passing through crystal. One slider. Infinite variations.

Set your tile count, dial the refraction intensity, warp the mesh— bulge, skew, perspective, twist. Every combination animates.

Tiles

2×2 → 20×20

Refraction

0–100%

Mesh Deform

7 modes

Column Blinds

Venetian blinds for color.

Slice your gradient into vertical strips that offset independently. What was static now breathes.

Three patterns—alternating, progressive, wave—each creating completely different energy.

IIkeptkepttryingtryingtotofakefakethisthisstuffstuffininPhotoshop.Photoshop.GlassGlasstiletileoverlays,overlays,manualmanualmeshmeshwarps,warps,layerlayeruponuponlayerlayerofofhacks.hacks.ThenThenIIthought—whatthought—whatififthethegradientgradienttooltooljustjustdiddidthis?this?WhatWhatififdimensiondimensionwas a slider?was a slider?

Mesh Warp

Bend the grid itself.

Seven deformation modes. Bulge pushes outward. Perspective adds depth. Twist spirals from center.

Stack them. A curved, twisted, perspective-warped grid that still animates smoothly.

You've been looking
for this.

No account needed. No mesh tool required. Just open the editor and start making the dimensional gradients you've been imagining.

Free tier availableExport to PNG, SVG, CSS, GIF, MP4No watermarks at $8/mo
Geometry