Design & CSS

Create colors, responsive sizing and production-ready CSS.

Color & Accessibility

Color ConverterConvert colors between HEX, RGB, HSL, HSV, CMYK and LAB — edit any field and the rest update as you go.Specialized pages (8)
Contrast CheckerEnter a text and background color to see the WCAG contrast ratio and which AA and AAA levels pass.

CSS Layout & Effects

Box Shadow GeneratorDrag sliders to shape a box-shadow, stack layers for depth, and copy the finished CSS instantly.
Gradient GeneratorBuild a linear, radial, or conic gradient, add color stops and set the direction, then copy the CSS in one click.
Border Radius GeneratorRound each corner with sliders, shape organic blobs with the elliptical mode, and copy the CSS instantly.
Flexbox GeneratorSet up a flex container and its items with visual controls, watch the layout react live, and copy the CSS in one click.
CSS Grid GeneratorSet your columns and rows, drag across the cells to place items, and copy the grid CSS with matching HTML in one click.
CSS Cubic Bezier GeneratorDrag the two handles to shape an easing curve, watch a dot ride it against a steady one, and copy the cubic-bezier() value.
CSS clamp() CalculatorEnter a size for small and large screens and get a fluid clamp() value that scales smoothly in between — for font sizes, padding, margins or gaps.

Font Inspection & Licensing

Font License & Info CheckerOpen a local font to read its embedded names, license text and document-embedding flags — as file evidence, not proof that you hold a license.

Screen, Print & Proportion