The modern approach to website design

Experience the power of code in a visual canvas. With Webflow, you can turn any web design into a website that’s ready to publish — in one click.

Transforming the design process at:

Web design software for designers

Design and build visually, in a familiar UI. Build complex, rich animations, and create responsive designs — without touching a single line of code.

  • Drag and drop HTML elements, and create reusable symbols
  • Work directly with CMS data to build your site with real content

Web design software 
for developers

Build interfaces based off fully functional designs, made with clean, semantic code. Inspect the published code directly, or export as a ZIP file if needed.

  • Build with the fundamentals of HTML, CSS, and JavaScript.
  • Add custom code and integrations.

No items found.

Table of Contents

Webflow's advance approach to website design

The button element is highlighted in a snippet of the Webflow Designer UI. In the background a button on a website is highlighted.

Easily drag and drop HTML elements

Webflow's visual development platform makes creating a new website faster. Drag in a container, pull in a header, use Flexbox or CSS grid, and style everything your way.

Webflow’s design system puts in front of you a visual canvas with all of the tools and controls you need to create custom websites. Every part of the design process, whether it’s creating a user interface, building a landing page, or assembling an online store are all possible through Webflow’s Designer.

The gradient color panel of the Webflow Designer UI shows a purple gradient. In the background a div is filled with the purple gradient.

Experience the power of CSS and JavaScript

Freed from the barrier of knowing how to code, anybody can tap into advanced CSS and complex JavaScript to liven up their designs. Jump into the Style panel to create hover states for an element, switch up the typography, create radial gradients, and apply styles to any HTML element.

Webflow’s selection of animations and interactions utilize both CSS and JavaScript to help you bring visual excitement to your designs. You get all of the advantages of using CSS and JavaScript, and none of the hassle of having to code it.

The animations panel of the Webflow Designer UI is shown. In the background a nav menu is highlighted, indicating that an animation is applied to it.

Build advance interactions and animations

Parallax effects, scroll triggered effects, and other stylish modern animations and interactions are made possible through Webflow’s visually based interface. You can even integrate and control Lottie and After Effects animations without coding.

Get complete creative control. Web designers are no longer limited to presets and cookie-cutter effects.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code.

The symbol override panel of the Webflow Designer UI is shown with override fields displaying for Name, Title, Review and Image. In the background, a card is indicated as a symbol.

Create reusable symbols

Symbols allow you to convert elements, as well as their children, into a reusable layout — update and edit symbols in a single place to avoid revising each recurring layout individually.

Webflow’s Symbols can be used again and again, replacing the tedious task of having to rebuild recurring layouts. Symbols are just one part of Webflow’s design system, which provides a modal approach to the design process, giving you the building blocks to create, and scale, any type of website design.

The CMS panel of the Webflow Designer UI shows that "Main Image" content is being pulled from the CMS. In the background, a grid layout shows 10 cards with different background images.

Build with real content

Working with true content gives a more accurate representation of a web page as it’s being built. Webflow’s content management system gives you a centralized space to create different blocks of content, which then can be added to a page design. With your choice of fields for including content like text, videos, images, and other content you can create a variety of collections to cover the different content you’d like to include.

Webflow’s CMS also has another powerful role - and that’s taking care of the necessary content for ecommerce. Create categories, build product pages, and add products. Start with the raw materials of real content and see your ecommerce website take form.

The link settings panel of the Webflow Designer UI shows that a link is opening a new page of a website. In the background, a button is highlighted on a website.

Create functional prototypes

With Webflow, prototyping and building a live website are one and the same. Webflow generates the clean, W3C compliant HTML and CSS. There’s no extra steps in translating a prototype into a live website. It’s already done for you.

Learn more

The modern web design process

Learn how a well-defined process translates to high-performing websites.

Link to The Modern Web Design Process Ebook

The word on Webflow

Tiffaney Fox Quintana
VP of Marketing, HelloSign

Before we moved to Webflow, updating an existing webpage or adding a new page would take a minimum of 3 weeks. That degree of rigidity was unsustainable.

Josh Kaplan
Director of Design, Petal

I feel like Webflow has given our design team superpowers. The biggest hurdle to bringing things to life on the web has always been engineering. With Webflow, that hurdle’s completely removed.

Sarah Smith
Marketing Operations Manager, Rakuten

Since rebuilding and redesigning our site on Webflow, our on-site engagement has risen dramatically. Even with previous redesigns we never saw these results.

Resources to learn more