MakerBox

CSS & Design

Generate gradients, shadows, and other copy-paste-ready CSS snippets.

What it looks like 15

CSS Gradient Generator

Mesh Gradient Generator

CSS Box Shadow Generator

CSS text-shadow Generator with Live Preview

CSS Border Radius Generator

Glassmorphism CSS Generator

Neumorphism CSS Generator with Live Preview

CSS Filter Generator

CSS Clip-Path Generator

CSS Triangle Generator with Live Preview

CSS Text Stroke (Outline) Generator with Live Preview

SVG Blob Generator

SVG Wave Generator

CSS Pattern Generator

React Native Shadow Generator

Motion 6

Cubic Bezier Generator

CSS Transition Generator

CSS Transform Generator

CSS Animation Generator

CSS Loader & Spinner Generator

CSS Glitch Text Generator (Animated RGB-Split Effect)

Layout and type 7

CSS Flexbox Generator with Live Preview

CSS Grid Generator

CSS Media Query Generator

CSS clamp() Generator for Fluid Typography

PX to REM & EM Converter

CSS Line-Clamp Generator (Truncate Text to N Lines)

CSS Beautifier & Minifier

Components 3

CSS Toggle Switch Generator

CSS Checkbox Generator

CSS Scrollbar Generator

Not sure which tool?

Generators for the CSS that is tedious to write from memory and easy to get subtly wrong. The visual ones — gradients, mesh gradients, box shadows, border radius, blobs, waves, patterns — let you drag until it looks right and copy what produced it, which is faster than guessing at four numbers.

cubic-bezier is for shaping an easing curve by eye; the animation generator and the loader generator produce keyframes you can paste.

Then the components that everyone rebuilds: toggle switches, checkboxes, scrollbars, glitch text. And React Native shadow: shadows on React Native do not work the way they do on the web, so CSS values cannot be copied across as they are.