Useful Tools and Resources to Create a Professional Website

A professional website is a hundred small decisions: which icon set, which font pairing, where the hero photo comes from, how to check contrast, how to make the social preview look right. Each decision has a tool that makes it easy, and finding those tools is half the work. This is the list we keep coming back to.

Everything here is free to use or has a generous free tier, is actively maintained, and can be browsed without creating an account. Where a resource has a license worth knowing about, it is mentioned. The list is grouped by the stage of the work, from the first sketch to the day after launch.

Contents

1. Inspiration
2. Design tools
3. UI kits and components
4. Icons
5. Illustrations
6. Photos and video
7. Colors and gradients
8. Backgrounds and patterns
9. Typography
10. Mockups and screenshots
11. Image tools
12. Animation
13. Accessibility
14. Performance
15. SEO tools
16. Analytics
17. Forms, CMS and hosting
18. Guides and learning
19. A starter stack

Inspiration: what good websites look like

Start by looking, not building. Ten minutes on these galleries before opening an editor saves hours later.

• Land-book: a large, well-tagged gallery of landing pages. Filter by industry, style or color.
• Lapa Ninja: landing pages with the full-page screenshot and, often, the hero copy extracted, which is useful for studying headlines.
• Landingfolio: landing page examples broken down into sections (heroes, pricing, testimonials), so you can compare one section across many sites.
• SaaS Landing Page: as the name says, sorted by section and by industry.
• Godly: the more experimental end: motion, unusual layouts, strong art direction.
• Mobbin: real product screens and flows, mobile and web. The free tier is limited but enough to study patterns.
• Refero: real UI from live products, searchable by component (“empty state”, “pricing table”).
• Awwwards: award-winning sites; more craft than conversion, good for visual ambition.
• Dribbble and Behance: designer portfolios. Remember that many shots are concepts that were never built.

Design tools

• Figma: the standard for interface design and prototyping; the free plan covers a solo project. The Figma Community has thousands of free kits and templates.
• Penpot: open-source alternative to Figma, self-hostable, with design tokens built in.
• Excalidraw: hand-drawn-style whiteboard for wireframes and diagrams. Fast, no account needed.
• Photopea: a Photoshop-like editor in the browser that opens PSD, XD and Sketch files.
• Canva: quick social images, presentations and simple graphics when a full design tool is overkill.

UI kits and component libraries

If you build with Tailwind CSS, these give you production-ready sections and components to compose or copy.

• shadcn/ui: accessible components you copy into your project and own; the de facto standard for React projects and the token model many templates now follow.
• Tailwind Plus: the official component and template catalog from the Tailwind team. Paid, but the free previews are a design education on their own.
• Flowbite: a large open-source component library on Tailwind with interactive elements.
• daisyUI: Tailwind plugin that adds semantic class names (btn, card) and themes.
• Preline: open-source Tailwind components with a broad set of marketing sections.
• Headless UI and Radix Primitives: unstyled, accessible building blocks (menus, dialogs, tabs) when you want your own look with the accessibility done right.
• HeroUI: a complete styled component library for React and Tailwind.

Icon sets

Pick one set and stick to it: mixing icon styles is the most common giveaway of an assembled site.

• Tabler Icons: over five thousand consistent line icons, MIT licensed. The set AstroWind uses.
• Lucide: clean, consistent, well maintained; the community fork of Feather.
• Heroicons: by the Tailwind team, in outline, solid and mini variants.
• Phosphor: six weights of the same icon, from thin to duotone, for a more expressive look.
• Iconify and Icônes: search across almost every open icon set at once and copy the SVG or the component.
• Simple Icons: brand logos as SVG (GitHub, Stripe, Slack…), for integration grids and footers.
• Remix Icon: a large neutral set in line and fill styles.
• SVG Repo: half a million SVG icons and vectors with per-item licenses.

Illustrations

• unDraw: open-source illustrations that recolor to your brand color in the browser.
• Storyset: customizable illustrations, some animated, with several visual styles.
• Humaaans: mix-and-match people illustrations, useful for team and onboarding pages.
• Open Doodles: free hand-drawn figures with a sketchy look.
• Blush: illustration collections by different artists that you can customize; free tier for the basics.
• ManyPixels: a gallery of free illustrations in a handful of consistent styles.

Free stock photos and video

• Unsplash: the largest free photo library; the Unsplash license allows commercial use without attribution. Their image CDN is what many templates, including AstroWind’s demo, load from.
• Pexels: photos and a strong video collection under a similarly permissive license.
• Pixabay: photos, vectors, videos and music.
• Lummi: AI-generated stock imagery, useful when a concept does not exist as a photo.
• Reshot: hand-picked photos and icons without the overused feel of the big libraries.
• Coverr and Mixkit: free background video clips for heroes; keep them short, muted and behind a poster image.

One rule for all of them: check the license of the specific file, credit when asked, and never use a recognizable person’s face for a testimonial they did not give.

Colors, palettes and gradients

• Realtime Colors: try a palette on a realistic page layout, light and dark, before committing.
• Coolors: fast palette generator with contrast checks and export to CSS.
• UI Colors: turn one brand color into a full Tailwind-style scale from 50 to 950.
• Color Hunt and Huemint: curated and machine-generated palettes for inspiration.
• Palette Maker and ColorSpace: palettes from a single color, with previews.
• Hypercolor: Tailwind gradient classes, ready to copy.
• uiGradients and WebGradients: classic two-color gradients with CSS output.
• CSS Gradient and Gradient Magic: editors for linear, radial and more complex CSS gradients.
• Mesh gradients: the soft, multi-color backgrounds behind many 2026 heroes, as images.

Backgrounds, patterns and shapes

• Haikei: SVG waves, blobs, layered shapes and mesh backgrounds, exported as SVG or PNG.
• Hero Patterns: repeatable SVG patterns as CSS, with color and opacity controls.
• fffuel: a collection of small generators for gradients, blobs, noise, shapes and dividers.
• Get Waves: section dividers as SVG waves.
• CSS Pattern and Pattern Monster: pure-CSS and SVG patterns.
• BGJar: animated and static SVG backgrounds.
• Transparent Textures: subtle textures to lay over a color.
• Glassmorphism CSS, Neumorphism and Smooth Shadows: generators for the effects that are hard to get right by hand.
• Clippy: clip-path shapes visually.

Fonts and typography

• Google Fonts: the largest free library; pair with the filters for variable fonts and language support.
• Fontsource: the same open fonts as npm packages, so you can self-host them (Astro’s Fonts API uses it as a provider).
• Fontshare: high-quality free fonts from Indian Type Foundry, a different flavor from Google Fonts.
• Fontpair: tested pairings of Google Fonts for headings and body.
• Typewolf: what fonts real sites use, with recommendations and alternatives.
• Typescale: pick a base size and a ratio, get a consistent type scale as CSS.
• Modern Font Stacks: system font stacks that look good on every platform and load instantly.

Mockups and screenshots

• Shots: put a screenshot in a device frame or on a gradient background, with shadows and rotations.
• Screely and Cleanmock: quick browser-window mockups.
• Mockuphone: phone and tablet frames for app screenshots.
• Previewed and Smartmockups: 3D device mockups and scenes.
• Carbon and ray.so: beautiful code screenshots for posts and social cards.

Image optimization, favicons and social images

• Squoosh: compress and convert images in the browser, comparing formats side by side. The tool to learn what WebP and AVIF actually do.
• TinyPNG: batch compression of PNG, JPEG and WebP.
• SVGOMG: optimize SVG files, with a live preview of what each option removes.
• remove.bg: background removal for product and portrait photos.
• RealFaviconGenerator and favicon.io: every favicon size and format from one image or a couple of letters.
• OpenGraph.xyz and Meta Tags: preview how a page will look when shared on social networks and chat apps, and generate the tags.

Animation

• Motion: a modern animation library for the web with a small footprint.
• LottieFiles: vector animations that play at any size; thousands are free.
• Rive: interactive animations that respond to state, with a free editor.
• Animate.css and Animista: ready-made CSS animations to copy.
• Lordicon: animated icons, with a free set.

Whatever you use, respect prefers-reduced-motion, keep hero animations under a second, and never animate the thing the visitor is trying to read.

Accessibility checks

• WebAIM Contrast Checker: the reference tool for the 4.5:1 rule.
• Who Can Use: shows a color pair as people with different vision conditions see it.
• Color.review: pick colors that pass contrast at each text size, visually.
• WAVE: page-level accessibility evaluation with the issues marked in place.
• Accessibility Checker: an audit against WCAG with plain-language explanations.
• WCAG 2.2 quick reference: the guidelines themselves, filterable by level.

Performance and testing

• PageSpeed Insights: Lighthouse plus real-user Core Web Vitals for any public URL.
• Responsively: see a page on many screen sizes at once while you develop.
• BrowserStack Responsive: quick checks on real device sizes.
• Can I use: browser support for any CSS or JavaScript feature before you rely on it.

SEO tools

• Google Search Console: how Google sees the site: indexing, queries, Core Web Vitals, rich results. Set it up on day one.
• Ahrefs Webmaster Tools: a free site audit and backlink report for sites you own.
• Schema Markup Validator: check structured data (Article, FAQPage, Product) before you count on a rich result.
• Meta Tags: title and description lengths, with previews of the search result.

Privacy-friendly analytics

• Plausible: simple, cookieless analytics; open source and self-hostable, hosted plans paid.
• Umami: open-source, self-hosted, one small script.
• Fathom: privacy-first analytics with a clean dashboard.
• PostHog: product analytics, session replay and feature flags with a generous free tier when you need more than page views.

A cookieless tool avoids the consent banner in many jurisdictions and keeps the landing page clean.

Forms, content management and hosting

• Formspree and Tally: forms without a backend: point the form’s action at them or embed one.
• Decap CMS: open-source, Git-based editing for Markdown content, ideal for a static blog.
• Keystatic: a Git-based CMS with a modern editor for Astro and Next.js projects.
• Sanity: a hosted, structured content backend when the site outgrows Markdown files.
• Vercel, Netlify and Cloudflare Pages: free hosting for static sites with deploy-on-push, previews and a global CDN.

Guides and learning

• Astro documentation and Tailwind CSS documentation: both are unusually good; read them before searching.
• MDN Web Docs: the reference for HTML, CSS and JavaScript.
• web.dev Learn: structured courses on CSS, accessibility, performance, forms and images.
• Refactoring UI: design for developers, from the creators of Tailwind. The book is paid; the free articles teach the essentials.
• Laws of UX: the psychology behind interface decisions, one law per page.
• Checklist Design: what a page, a form or an empty state should include, as checklists.
• Growth.Design: case studies of real products as comics; the best introduction to conversion psychology.
• Lorem Ipsum and Mockaroo: placeholder text and realistic fake data while the real content arrives.

A starter stack for a site in a weekend

If you want one answer per category, this is a combination that works together and costs nothing:

1. Look at Land-book and Landingfolio for an hour; save five references.
2. Sketch the pages in Excalidraw, one screen per section.
3. Build with a template that already has the sections (AstroWind, for Astro and Tailwind), Tabler icons, and Inter or a Fontshare pairing.
4. Color with Realtime Colors, then UI Colors for the scale; check every pair in WebAIM.
5. Illustrate with unDraw recolored to your primary, photos from Unsplash, the hero screenshot framed in Shots.
6. Optimize every image in Squoosh, generate favicons with RealFaviconGenerator, check the social card in OpenGraph.xyz.
7. Ship to Vercel, Netlify or Cloudflare Pages; connect the form to Formspree; add Plausible or Umami.
8. Check with PageSpeed Insights, WAVE and the Schema validator; add the site to Search Console.

Then read the landing page guide before you write the home page, and the getting started guide if you are building on AstroWind.