🎨 Design Tools

What are Design Tools?

CSS gradients and shadows are numbers you have to judge by eye, and editing code then reloading eats the afternoon. Move a slider, see it immediately, copy the CSS when it looks right.

When you need them

• You're tuning a gradient or a shadow and want to see it as you go
• An image needs resizing without uploading it anywhere
• You want a border radius that isn't just a uniform circle
• You need the CSS for something you can already picture

All Design Tools

• CSS Gradient Generator — Visually design linear, radial, and conic gradients and instantly get the CSS code. Includes presets and a random color generator.
• CSS Shadow Generator — Build layered CSS `box-shadow` and `text-shadow` with real-time sliders and presets for Material Design, neon glow, and more.
• Cubic Bezier Curve Editor — Visually edit CSS cubic-bezier easing curves and see a live preview of your animation in real time.
• Image Resizer and Compressor — Resize and compress images to reduce file size. Batch convert to JPEG, PNG, or WebP right in your browser.
• CSS Border-Radius Generator — Visually generate CSS `border-radius` by adjusting each corner, with an advanced 8-direction mode for blob shapes.

Good to know

Every tool on Toolz, Design Tools included, is free with no sign-up and nothing to install. Your input is processed inside the browser and never sent to or stored on a server, so it is safe to use with work data. If the tool you want isn't listed, the button below searches every category. 🔍 Search all