Free tools
Tools
Playgrounds for building with Crucible — tune shaders, color, motion, and surface, and copy paste-ready code. No account needed.
- ShadersBackground StudioSee any animated background full-screen and dial in its look — colors, speed, intensity — then copy the exact JSX to drop into your page.
- ColorPalettePick a color theme and watch it restyle real components live, then export it as CSS variables, Tailwind v4 tokens, or a Crucible theme.
- MotionEasing DesignerShape a motion curve by dragging its handles, watch it drive a real animation, then copy it as CSS or a Motion transition.
- SurfaceGradient & GlowCompose multi-stop gradients and layered bloom on a dark canvas with a live preview, then copy the CSS, Tailwind v4, or JSX.
- ElevationShadow StudioDesign smooth, layered elevation shadows from a light angle and height — or hand-tune every layer — then copy the CSS, a Tailwind v4 class, or a drop-shadow filter.
- LayoutSection DividerShape the seam between two sections — waves, curves, slants, zigzags, blobs — then export paste-ready SVG, a React component, or a CSS data-URI background.
- GradientGradient MeshDrop color points on a canvas and drag them into a soft, blurry aurora mesh, then copy paste-ready CSS, an SVG, or a React component.
- TextureNoise & GrainDial in a tileable film grain — fine dust to coarse static, mono or colored — over a live sample, then export a performant CSS data-URI, SVG, or React overlay.
- TypeType ScalePick a base size and ratio and see every step render live with its px, rem, and line-height, then export CSS variables, a Tailwind v4 @theme block, or classes.
- ShapeBorder Radius & SquircleRound each corner or link them as one, flip to smooth iOS-style squircle corners, then copy the CSS, a Tailwind v4 class, or an SVG clip-path.