Free CSS and styling tools
Small, fast tools for the styling side of building websites. Everything runs in your browser — nothing you type leaves your device.
Tailwind CSS colors
Every v4 and v3 shade, 50 to 950. Click to copy HEX, RGB, OKLCH, the class name or the CSS variable.
Tailwind shade generator
Turn one brand colour into a full 50–950 scale. Copy it as a v4 @theme block, a v3 config or CSS variables.
CSS to Tailwind converter
Paste CSS, get Tailwind v4 classes — hover and media rules included. Values with no exact class stay exact.
CSS clip-path generator
Drag points to cut an element into any shape — triangle, hexagon, star, arrow. Copy the CSS or a Tailwind class.
CSS grid generator
Set columns, rows and gaps, drag to place items, then copy the CSS, the HTML or Tailwind classes.
Flexbox generator
Set direction, wrap, alignment and gap, then grow, shrink and order each item. Copy the CSS, the HTML or Tailwind classes.
Border radius generator
Round each corner in px or %, with elliptical corners and presets. Copy the shortest CSS, the longhands or Tailwind classes.
Glassmorphism generator
Frosted-glass cards with backdrop-filter: set blur, fill, border and shadow over a live backdrop. Copy the CSS or Tailwind classes.
CSS button generator
Design a button with a gradient, shadow and hover effect, with the WCAG text contrast checked live. Copy the CSS, HTML or Tailwind classes.
SVG blob generator
Random, smooth blob shapes: set the points and how irregular they are, a colour or gradient. Copy the SVG, a CSS background or a mask, or download SVG and PNG.
SVG wave generator
Wavy section dividers: smooth waves, peaks or steps, up to 5 layers, top or bottom. Copy the SVG or a full-width CSS background, or download SVG and PNG.
Mesh gradient generator
Soft, blended backgrounds: drag up to 8 colour points over a base colour and set how far each spreads. Copy the CSS or Tailwind classes, or download a PNG.
CSS animation generator
Build @keyframes from 15 presets — fade, slide, zoom, bounce, shake, spin — with a live preview. Set easing, delay, loops and fill mode, then copy the CSS or Tailwind.
Responsive design tester
See any website at phone, tablet and desktop widths side by side. Each preview is a real browser window at the device width, so your media queries fire.
CSS table generator
Paste CSV or spreadsheet cells and style the table — header, striped rows, hover, borders and padding. Copy the CSS + HTML or Tailwind markup.
CSS pattern generator
Repeating backgrounds from CSS alone — stripes at any angle, dots, polka, grid, checkerboard, triangles, zigzag — or draw a pixel tile. Copy the CSS or Tailwind classes.
Tailwind CSS cheat sheet
Search 557 Tailwind v4 classes by name or CSS property and see the exact CSS each one makes.