CalcChef tool collection
CSS Tools
Build and refine interface styles faster with visual CSS generators and copy-ready values for common layout and design tasks.
Start with these tools
CSS Triangle Generator
Generate a CSS triangle or arrow pointing in any of eight directions. Set the size and color, then copy border CSS, a ::after rule, a clip-path or an SVG.
CSS Gradient Generator
Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.
CSS Flexbox Generator
Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind.
CSS Grid Generator
Set 1 to 12 columns and rows, a gap up to 50 px or a track list such as 1fr 2fr auto, place items by grid line, and copy the CSS, Tailwind or SCSS.
CSS Clamp Generator
Generate a CSS clamp() for fluid font sizes and spacing from a min and max size and a viewport range, or edit an existing clamp with a live preview.
Color Contrast Checker
Enter a text and a background color, with opacity, to get the WCAG contrast ratio and AA and AAA pass or fail for normal and large text.
All CSS Tools
26 free browser-based tools
Color Contrast Checker
Enter a text and a background color, with opacity, to get the WCAG contrast ratio and AA and AAA pass or fail for normal and large text.
Color Mixer
Mix two to four hex colors by weight in OKLab, sRGB or linear light: red and blue at 50% give #8c53a2 in OKLab. Copy HEX, RGB, HSL, OKLCH or CSS color-mix().
Color Palette Generator
Make a 5-color palette from one hex color: monochromatic, complementary, analogous, triadic or split-complementary, with WCAG contrast for each swatch.
CSS Animation Generator
Build a CSS @keyframes animation from up to five steps of rotate, scale, opacity and translate. Set timing, repeats, direction and fill, then copy the code.
CSS Border Radius Generator
Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.
CSS Box Shadow Generator
Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.
CSS Clamp Generator
Generate a CSS clamp() for fluid font sizes and spacing from a min and max size and a viewport range, or edit an existing clamp with a live preview.
CSS Clip Path Generator
Write clip-path circle(), ellipse(), inset() or polygon() code from sliders, typed points or points you drag, then copy it as CSS, SCSS, React or Tailwind.
CSS Cursor Generator
Search 36 CSS cursor keywords, see each one as your system draws it, try a custom cursor image, and copy the CSS, SCSS, variable or Tailwind code.
CSS Filter Generator
Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.
CSS Flexbox Generator
Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind.
CSS Font Preview
Preview a standard font stack or any Google Fonts family at 8 to 120 px with weight, line height and letter spacing, and copy the CSS and @import.
CSS Glassmorphism Generator
Set blur, saturation, tint opacity, corner radius, shadow and inner glow for a frosted glass panel and copy the backdrop-filter CSS, SCSS or Tailwind classes.
CSS Gradient Generator
Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.
CSS Grid Generator
Set 1 to 12 columns and rows, a gap up to 50 px or a track list such as 1fr 2fr auto, place items by grid line, and copy the CSS, Tailwind or SCSS.
CSS Neumorphism Generator
Make soft UI (neumorphism) shadows from one surface color: pick flat, convex, concave or pressed, set distance, blur and light, then copy CSS, SCSS or Tailwind.
CSS Text Shadow Generator
Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.
CSS Transform Generator
Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.
CSS Triangle Generator
Generate a CSS triangle or arrow pointing in any of eight directions. Set the size and color, then copy border CSS, a ::after rule, a clip-path or an SVG.
Font Pair Generator
Get a heading and body font pairing from 15 Google Fonts combinations, lock or swap either font, try your own text, and copy the CSS or the Google Fonts link.
Hex to RGBA Converter
Convert hex to rgba(): #007BFF is rgba(0, 123, 255, 1). Reads 3, 4, 6 and 8-digit hex or rgb()/rgba(), sets the opacity, and gives hsla() and 8-digit hex.
PX to REM Converter
Convert px to rem and rem to px at any base font size (16px by default), with em, pt and percent conversion and a px to rem chart for common sizes.
SVG Blob Generator
Make an organic SVG blob: set complexity, contrast and smoothness, pick a color, gradient or image fill, then copy SVG, CSS or React, or save a PNG.
SVG Pattern Generator
Make a seamless SVG pattern tile of dots, squares, plus signs, stripes, checkers, hexagons or triangles; copy CSS with background-size or save SVG or PNG.
SVG Wave Generator
Make an SVG wave divider for the top or bottom of a section: set points, amplitude, curve bend, size and color, then copy the SVG or download SVG or PNG.
Tailwind Shadow Generator
Get the Tailwind CSS v4 shadow class and CSS box-shadow for sizes 2xs to 2xl, an inset version, or a custom shadow value written as shadow-[...].