Design & CSS

Turn a code snippet into a syntax-highlighted image in your browser, with 20+ languages, custom themes and backgrounds, line numbers, and PNG or SVG export.

Check the WCAG 2.1 contrast ratio and APCA Lc score between text and background colors, see AA, AAA and 3:1 badges, and apply the nearest passing color.

Blend two HEX colors at a chosen ratio in RGB or Lab color space and read the resulting mid color back as a swatch and copyable HEX value.

Turn one base HEX color into a perceptual OKLCH, HSL, or RGB shade scale with adjustable stops, WCAG contrast hints, and CSS, Tailwind, and JSON export.

Upload an image and preview how it looks with protanopia, deuteranopia, tritanopia, or full color blindness, then download the simulated result.

Adjust all eight border-radius corner values, including elliptical horizontal and vertical radii, to see a live box preview and copy the shorthand CSS.

Build a multi-layer CSS box-shadow with offset, blur, spread, color and inset controls, see a live preview, and copy the ready-to-use property.

Turn a minimum and maximum font size plus a minimum and maximum viewport width into a single breakpoint-free CSS clamp() fluid-typography expression.

Build a CSS clip-path from circle, ellipse, polygon, inset or rounded-inset presets with number inputs, preview it live, and copy the ready-to-use property.

Visually edit a CSS cubic-bezier or steps() easing by dragging its handles, preview it with a live animation, compare it with a preset, and copy the value.

Visually build CSS Flexbox or Grid with container and per-item controls, custom track sizing and a grid-template-areas editor, then copy the generated CSS.

Generate frosted-glass CSS with blur, transparency, saturation, border and shadow controls plus a tint color, preview it over a backdrop, and copy the backdrop-filter CSS.