Visual and CSS helpers for designers and front-end developers — pick colours, build gradients, craft shadows, and generate ready-to-paste CSS. Everything runs in your browser with a live preview.
11 free tools · browser-based · no sign-up
Which design tool do you need?
| I need to… | Use |
|---|---|
| Convert between HEX, RGB and HSL | Color Converter |
| Build a coordinated color palette | Color Palette |
| Create a CSS gradient | Gradient Generator |
| Design a box shadow | Box Shadow |
| Round element corners | Border Radius |
| Lay out with Flexbox or Grid | Flexbox & Grid |
| Make favicons for a site | Favicon Generator |
Color Converter
HEX, RGB, HSL, CMYK, and nearest named colour.
Open tool →QR Code Generator
Logos, gradients, UPI, vCard, WiFi, batch CSV.
Open tool →Barcode Generator
Code 39, Code 128, EAN-13, UPC-A.
Open tool →Color Palette Generator
8 schemes, WCAG contrast check, CSS export.
Open tool →Gradient Generator
Multi-stop linear, radial, and conic.
Open tool →Flexbox & Grid Generator
Build layouts visually, copy CSS and HTML.
Open tool →Box Shadow Generator
Stack multiple layered shadows.
Open tool →Border Radius Generator
Elliptical corners and presets.
Open tool →SVG Blob Generator
Gradient fills, stroke, variations.
Open tool →Avatar Generator
Identicon, rings, initials, Bauhaus.
Open tool →Favicon Generator
Every icon size plus the HTML snippet.
Open tool →