CSS Generators & QR Code Tools
27 free design utilities: gradients, shadows, radii, keyframes, flexbox and grid builders, colour and accessibility checkers, SVG pattern makers — plus a full QR code and barcode studio. Live preview, copy-ready code, nothing uploaded.
CSS & Design Generators
CSS Gradient Generator
Build linear and radial CSS gradients with live preview, three colour stops and copy-ready code.
Open →SHADOWBox Shadow Generator
Design CSS box-shadows with offset, blur, spread, colour and opacity, then copy the declaration.
Open →RADIUSBorder Radius Generator
Set each corner independently and copy the short or long-hand border-radius declaration.
Open →ANIMATIONCSS Animation Generator
Pick a keyframe preset, tune duration and easing, and copy the animation plus @keyframes block.
Open →TRANSITIONCSS Transition Generator
Generate transition declarations with property, duration and easing, and hover the live preview.
Open →TEXTText Shadow Generator
Build readable text shadows with offset, blur and colour, with a live sample headline.
Open →FLEXBOXFlexbox Generator
Configure flex direction, justification, alignment, wrapping and gap with a live rendered preview.
Open →GRIDCSS Grid Generator
Set column count, optional rows and gap to generate a responsive CSS Grid layout.
Open →COLOURHex to RGB Converter
Convert any hex colour to rgb() and hsl() values with a live swatch and CSS snippet.
Open →COLOURRGB to HSL Converter
Convert RGB channel values to HSL and hex, with clamping and a live colour swatch.
Open →PICKERColor Picker Online
Pick a colour and read hex, RGB, HSL and approximate CMYK values side by side.
Open →A11YWCAG Color Contrast Checker
Check any text/background pair against WCAG 2.1 AA and AAA thresholds, with a live text sample.
Open →PALETTEColor Palette Generator
Generate analogous, complementary, triadic or monochrome palettes from a base colour, as CSS variables.
Open →RANDOMRandom Color Generator
Generate a batch of random hex colours for testing, mockups and placeholder palettes.
Open →SVGSVG Pattern Generator
Generate tileable SVG background patterns — dots, lines, grid, checker, cross — and export the file.
Open →SVGSVG Compressor
Strip comments, metadata and redundant whitespace from SVG markup and see the byte savings.
Open →TYPELine Height Calculator
Convert a font size and ratio into px, unitless and percentage line-height values with a live sample.
Open →TYPEFont Size Calculator
Convert px, rem, em and pt, and generate a modular type scale from a base size and ratio.
Open →QR & Barcode Tools
QR Code Generator
Create a QR code for any URL or text with custom size, colours and error correction, then download PNG.
Open →VCARDvCard QR Code Generator
Turn contact details into a scannable vCard QR code that adds you straight to the phone's address book.
Open →WIFIWiFi QR Code Generator
Share a WiFi network without typing the password — generate a scannable WIFI: QR code.
Open →SMSSMS QR Code Generator
Create a QR code that opens a pre-filled text message to your number.
Open →EMAILEmail QR Code Generator
Generate a QR code that opens a new email with recipient, subject and body pre-filled.
Open →BRANDEDCustom QR Code Generator
Branded QR codes with custom colours and a centre logo, generated at error-correction level H.
Open →SCANNERQR Code Scanner Online
Decode a QR code from an image file — drop a screenshot or photo and read the payload locally.
Open →BARCODEBarcode Generator
Generate EAN-13, UPC-A and Code 128 barcodes with check-digit validation and SVG download.
Open →BATCHBulk QR Code Generator
Generate up to 40 QR codes at once from a list — one per line — and download them as SVG files.
Open →