Bento CSS toolkit

Design CSS faster with focused visual generators.

A static collection of tools for border images, radius, shadows, colors, color blends, and clip-path shapes. Each tool has its own page and copy-ready output.

Explore tools
CSS
Studio

Tools

Pick a generator


01

Border-image generator

Create gradient or image borders with slice, width, outset, and repeat controls.

 02

Border-radius generator

Fine tune horizontal and vertical corner values for organic rounded shapes.

 03

Box-shadow generator

Build up to three shadow layers with offset, blur, spread, opacity, and inset options.

 04

Color format converter

Convert a chosen color into HEX, RGB, HSL, OKLCH-style, and readable text values.

 05

Color mixer

Mix two colors, compare blend modes, and preview a five-step palette.

 06

Shape generator

Generate clip-path shapes for blobs, diamonds, triangles, badges, and circles.