Free CSS Generators and Web Design Tools

Grid, Flexbox, Box Shadow, Gradient, Clip-Path and Contrast Checker Generators

CSS you can see while you write it. Every tool on this page renders a live preview beside the values you are adjusting and hands back the exact rule, or the complete component, to paste into your project — no sign-up, no watermark, and nothing sent to a server. The tools are grouped by what you are building.

Most used this week

Cursor Trail

Add a fading dot trail that follows the mouse.

Cursor Trail

Add a fading dot trail that follows the mouse.

News Ticker

Build a scrolling breaking news headline bar with a pause button.

News Ticker

Build a scrolling breaking news headline bar with a pause button.

Masonry Grid Builder

Pinterest-style masonry layouts in pure CSS.

Masonry Grid Builder

Pinterest-style masonry layouts in pure CSS.

Layout & Spacing 5

Grid, flexbox, containers, media queries, fluid type and spacing, unit conversion.

:has() Selector Builder

Pick a :has() pattern, see it work live and copy the HTML and CSS.

Bento Grid Builder

Bento-box grid layouts with spanning tiles, copy-ready.

Breakpoint Helper

Media query and container query boilerplate from a breakpoint.

Cascade Layers Generator

Set your @layer order and get the blocks or imports to paste.

Masonry Grid Builder

Pinterest-style masonry layouts in pure CSS.

Shadows & Motion 27

Shadows, gradients, glass, filters, patterns, easing curves, keyframes and transforms.

Animated Banner

Design an animated ad banner and export GIF or WebM.

Animated Counter

Make a number count-up animation and copy the code.

Animated Gradient

Make a smoothly shifting gradient background in pure CSS.

Backdrop Filter Generator

Compose backdrop-filter functions and preview the result live.

CSS Noise Generator

Film-grain noise texture from an inline SVG filter, no image file.

CSS Pattern Generator

Repeating background patterns built from CSS gradients, no images.

CSS Text Shadow Generator

Visual text-shadow builder with drop, long, neon and outline presets.

CSS Transform Generator

Compose translate, rotate, scale and skew into one transform value.

Cubic Bezier

Shape a CSS easing curve and watch it animate.

Cursor Trail

Add a fading dot trail that follows the mouse.

Dot Background

Faded dot-grid background for hero sections, pure CSS.

Drop Cap Generator

Style a magazine drop cap for the first letter and copy the CSS.

Floating Shapes

Add slowly rising, spinning shapes behind a hero section.

Gradient Maker

Linear, radial and conic CSS gradients with live preview.

Gradient Text Generator

Fill headline text with a CSS gradient and copy the code.

Image Filter Sandbox

Slide eight filter functions and copy the CSS declaration.

Keyframe Timeline

Edit a multi-stop keyframe timeline and export the CSS.

Logo Reveal

Animate a wordmark reveal and copy the CSS.

Mesh Gradient Generator

Pure-CSS mesh gradients from stacked radial layers.

Neumorphism

Soft UI dual shadows from a single surface colour.

Reading Progress Bar

Make a scroll progress bar for articles and copy the CSS and JS.

Scanline Effect

Retro CRT scanlines with an optional sweeping band.

Spotlight Effect

A soft glow that follows the mouse across your hero.

Starfield Background

Make stars stream past as if flying through space.

Text Animation

Animate a headline letter by letter and copy the CSS.

Text Highlight Effect

Style a highlighter-pen mark on key words and copy the CSS.

Torn Paper Edge

A ripped, jagged paper edge on a card or section.

Shapes & SVG 6

Clip paths, blobs, borders, dividers, waves, triangles, SVG encoding and path preview.

Blob Generator

Make organic blob shapes with border-radius.

CSS Divider Generator

Slanted, curved, zigzag and wave section dividers in pure CSS.

CSS Shapes Generator

Classic single-element CSS shapes with size and colour controls.

CSS Wave Generator

Wavy section edges from an inline SVG path, copied as CSS.

Corner Ribbon Maker

Diagonal corner ribbons for cards, no images required.

Emoji Favicon Maker

Any emoji into a one-line SVG favicon, no files.

UI Components 23

Cards, grids, hero sections, tooltips, buttons and inputs as copyable HTML and CSS.

3D Tilt Card

Build a card that tilts in 3D toward the cursor with a glare.

404 Page Generator

Custom "page not found" HTML page with home link and search.

Accordion Builder

Build a smooth, accessible accordion from native details elements.

Age Gate Builder

Age verification overlay with yes/no or date-of-birth check.

Announcement Bar

Build a dismissible top-of-page announcement bar with rotating messages.

Blog Card Builder

Article preview cards with image, tag, excerpt and author.

Bottom Sheet

Build a slide-up bottom sheet with actions and swipe to close.

CSS Generator

Build a formatted CSS rule from a selector and a form of properties.

Comparison Card Builder

Side-by-side comparison cards with ticks, crosses and a highlighted column.

Coverflow Carousel

Build a 3D cover flow slider with tilted side slides.

Expandable Card

Collapsible card built on details/summary, no JavaScript.

Feature Grid Builder

Responsive icon-title-description feature grids for landing pages.

Flip Card

3D flip card with front and back faces, no JavaScript.

Hover Card Builder

Card hover effects with timing controls, previewed live.

Mega Menu

Build an accessible full-width mega menu with link columns and a promo.

News Ticker

Build a scrolling breaking news headline bar with a pause button.

Popover Builder

Build a native HTML popover that opens next to its button.

Product Card Builder

E-commerce product cards with price, rating, badge and button.

Skeleton Loader Generator

CSS skeleton screen placeholders with shimmer or pulse animation.

Slide-In Generator

Generate a CSS slide in animation from any side.

Sticky Header

Build a sticky header that hides, shrinks or stays as the page scrolls.

Tabs Builder

Build accessible tabs with arrow key support and three styles.

Vertical Ticker

Build a ticker that rotates headlines one at a time, sliding up.

Forms & Inputs 10

Forms, validation, floating labels, masks, styled controls, sliders and password fields.

Custom Radio Button Builder

Accessible custom radio buttons as dots, cards or pill segments.

Dual Range Slider

Two-thumb min/max slider for price filters, no library needed.

Floating Label Form

Material-style floating labels in pure CSS with outlined, filled and underline variants.

Form Progress Bar

Step indicators and progress bars for multi-step forms and checkouts.

Input Mask Generator

Auto-formatting inputs for phone, date, card and custom patterns.

Multi-Step Form Builder

Wizard forms with step indicators, per-step validation and Back/Next buttons.

Password Strength Meter

Colour-coded password strength bar with a small scoring script.

Password Visibility Toggle

Show/hide password button with eye icon or text and correct ARIA state.

Range Slider Builder

Custom-styled range input with filled track and live value.

Select Dropdown Builder

Custom-styled native select with your own arrow, no JavaScript.

Colour 8

Palettes, contrast checking, luminance, tint and shade scales, extraction, CMYK preview.

Analogous Colour Generator

Generate neighbouring hues from one colour with tints and CSS.

Colour Palette Generator

Generate a full UI palette with light and dark modes from one colour.

Colour Picker

Pick a colour and copy it in every CSS format at once.

Complementary Colour Generator

Find a colour's complement with tints, shades and copyable CSS.

Contrast Checker

Check colour contrast against WCAG and APCA.

Luminance Scorer

Score many colour pairs for contrast at once.

Palette Extractor

Pull the dominant colours out of a photo as hex codes.

CSS Colour Converter

Convert CSS colours between hex, rgb, hsl, hwb, lab, lch and oklch.

Guides for common jobs

How the design tools are organised

Layout & Spacing is the structural layer: CSS grid and named grid areas, a flexbox playground, bento and masonry grids, responsive containers, aspect ratios, media queries, fluid spacing and clamp() calculations, px-to-rem conversion, line clamping and Tailwind-to-CSS translation.

Shadows, Gradients & Motion holds the visual effects — layered box and text shadows, linear, radial and mesh gradients, backdrop filters, glassmorphism and neumorphism, image filters, noise and pattern backgrounds, cubic-bezier easing, keyframe animations, transforms and custom scrollbars.

Shapes & SVG is for anything that is not a rectangle: clip-path, blob and border radii, borders, dividers, waves, triangles, ribbons, SVG data URIs, an SVG path visualiser and emoji favicons.

UI Components produces finished, accessible markup and styles: cards of every kind, feature and team grids, hero sections, tooltips, glass buttons, autocomplete, search boxes and file upload areas.

Forms & Inputs does the same for forms: contact, newsletter and multi-step forms, validation, progress bars, floating labels, input masks, styled checkboxes, radios and selects, single and dual range sliders, password toggles and strength meters.

Colour covers harmonies, contrast against WCAG thresholds, luminance, tint and shade scales, palette extraction from an image and a CMYK print preview.

Fluid, not fixed

Modern CSS lets one rule serve every viewport, and several tools here exist to write that rule correctly. A clamp() expression is easy to get wrong by hand; the calculators derive the preferred value from the two breakpoints you actually care about and show the result at every width in between.

Everything renders in your browser

The preview is the same engine that will render your site, so what you see is what a visitor on the same browser will see. Nothing is sent to a server — your colours, values and generated code stay on your machine — and every generator's output is yours to use in any project, commercial or otherwise.

FAQ

Do these CSS tools work without an account?

Yes. Every page is free, has no sign-up, and produces plain CSS with no attribution comment or watermark. Copy the rule and paste it into your stylesheet.

Is the generated CSS supported in all browsers?

The generators output standard properties supported by every current browser. A few features are newer than others — backdrop-filter, oklch() and @container among them — and each tool says so on its own page where it matters.

Can I use the output in a commercial project?

Yes. CSS produced by these tools is yours to use in anything, commercial or otherwise. There is no licence attached to a declaration like box-shadow: 0 1px 2px rgba(0,0,0,0.1).

Why does my preview look different in my own project?

Almost always inheritance. The preview element sits in a plain container, whereas your element inherits font sizes, line heights and box-sizing from the page around it. Check for a parent transform, overflow: hidden or filter, any of which changes how shadows and backdrop effects render.

Do these tools send my colours or values anywhere?

No. Everything is calculated in JavaScript in your browser, and the page makes no network request while you use it. Once loaded, the tools keep working offline.

Explore other categories

Calculators

Everyday maths, loans, dates, health and DIY. Nothing uploaded.

94 tools

Converters

Units, images, audio, video, documents and code formats, converted in your browser.

63 tools

Business

Rates, pricing, profit, invoicing and fees. All client-side.

15 tools

Text

Writing, lists, Markdown, HTML, Morse and ciphers.

23 tools

Developer

Regex, cron, formatters, JSON, YAML, Base64, hashing, JWT and SEO. All client-side.

48 tools

Media

Images, audio, video, screen and PDFs. Nothing leaves your browser.

174 tools

Names

Random names for people, fantasy races, sci-fi worlds and RPG characters.

389 tools

Data

Sourced, dated reference tables you can search, cite and download.

9 tools

Money

Pay, bills and property calculators that show their working.

14 tools

Time

Calendar lookups, date arithmetic and live countdowns to the days that matter.

18 tools

Maths

Fractions, primes, algebra and statistics, with the working shown.

12 tools

Science

Physics, chemistry and electronics calculators, with the formula shown.

4 tools

Word Games

Scrabble, Wordle, anagrams, crosswords and rhymes, solved.

4 tools