Free web design tools
Create a website's visual elements while seeing the result live: gradients, shadows, shapes, animations, palettes and favicons. Every tool gives clean CSS code to copy, and everything happens in your browser.
| Tool | Category | Processing |
|---|---|---|
| CSS gradient generatorLinear, radial and conic CSS gradients with ready-to-copy code. | Design | In your browser |
| Glassmorphism CSS generatorFrosted glass effect in CSS, previewed on your background. | Design | In your browser |
| CSS clip-path generatorClip an image into a polygon, circle or rectangle, by hand. | Design | In your browser |
| Flexbox and CSS Grid playgroundUnderstand and tune flexbox and CSS Grid live. | Design | In your browser |
| CSS box-shadow generatorLayered CSS shadows, presets, CSS and Tailwind code. | Design | In your browser |
| Border radius generatorRounded corners, pills and blobs in CSS. | Design | In your browser |
| CSS filter generatorLive CSS filters on your image, with export. | Design | In your browser |
| CSS animation generator15 adjustable CSS animations, ready @keyframes code. | Design | In your browser |
| Cubic-bezier generatorHand-drawn CSS easing curves, compared live. | Design | In your browser |
| Color palette generatorHarmonious palettes and 50–950 shades, ready to code. | Design | In your browser |
| Image color pickerDominant colors and eyedropper, codes ready to copy. | Design | In your browser |
| Color contrast checker (WCAG)WCAG AA and AAA contrast, with automatic correction. | Design | In your browser |
| Favicon generatorAll of a site's favicons in one click, with the HTML code. | Design | In your browser |
| SVG wave generatorSVG waves to separate sections, as SVG or CSS. | Design | In your browser |
| CSS pattern generatorPatterned backgrounds in pure CSS, no image. | Design | In your browser |
| Type scale generatorFont size scales and fluid type with clamp(). | Design | In your browser |
| CSS unit converterInstant px, rem, em, %, vw, pt, cm… conversions. | Design | In your browser |
| Aspect ratio calculatorImage ratio, proportional resizing and CSS aspect-ratio. | Design | In your browser |
About these tools
The design tools produce CSS code for the most common effects on the web: gradients, layered shadows, frosted glass, clip-path shapes, rounded corners and blobs, image filters, background patterns, SVG waves, animations and easing curves. Every setting shows instantly in a preview rendered by your browser with exactly the displayed code.
Other tools help you choose and check: harmonious palettes and 50 to 950 shade scales, colors extracted from an image, WCAG contrast with automatic correction, fluid type scale, unit conversion and aspect ratio calculation. The favicon generator creates every icon a site needs, from favicon.ico to Android icons.
The generated code is short and readable: only useful properties are written, with Tailwind and SCSS versions where relevant. Your settings are kept in your browser for your next visit, with no account and no data sent.
Which tool should I use?
I want a background or a surface effect
“CSS gradient” for colorful backgrounds, “CSS patterns” for dots and stripes, “Glassmorphism” for frosted glass, “Box shadow” for depth.
I want a particular shape
“Border radius” for rounded corners and blobs, “Clip-path” for polygons and cut-outs, “SVG wave” for section dividers.
I want to animate
“CSS animation” provides 15 ready effects; “Cubic Bézier” fine-tunes the speed of your transitions.
I'm choosing colors
“Color palette” offers harmonies and shade scales, “Image colors” extracts them from a photo or logo, and “WCAG contrast” checks readability.
I'm setting layout and sizes
“Flexbox and Grid” to place elements, “Type scale” for font sizes, “CSS units” and “Aspect ratio” for conversions.
Frequently asked questions
Does the code work in every browser?
Yes: the tools use CSS properties supported by all recent browsers, and add the needed prefixes (-webkit-) when Safari requires them.
Do I need to know CSS?
Not to tune settings and see the result. To use it, just paste the code into your site's stylesheet or into an editor such as WordPress, Webflow or Wix (custom CSS).
Are my settings saved?
Yes, in your browser only: you get your last settings back on your next visit. The “Default settings” button clears them.
Are the tools free for commercial use?
Yes. The generated code is yours, with no attribution or usage limit.