Adobe & HTML

Adobe

Adobe Edge Reflow

Adobe Edge Reflow CC (Preview)

Design the responsive web.

Adobe Edge Reflow: CSS generator

All-new Edge Reflow is here. Join Creative Cloud to get Edge Reflow CC and all the tools you need to create, collaborate, and stay connected. Get started with a free Creative Cloud membership.
What is Creative Cloud? →

Create responsive CSS layouts

Create beautiful responsive designs

Start responsive designs faster and create high-fidelity prototypes through media query breakpoints, precise CSS layouts, grouping and more. You can start from scratch or import your design from Photoshop and search through your assets easily.

Web Layout in Edge Reflow

Web layout

Design in Reflow for the web. Move between design environments easily while maintaining your design fidelity. Reflow uses CSS and behaves like a browser, making it easier to translate your designs to the web. Gain the predictability of web layout, with the freedom of an Adobe design tool.

Create responsive CSS layouts

Style

Create awesome designs using CSS like never before. A native web surface provides the precise and intuitive controls you need to turn your vision into reality. Use Reflow and the latest CSS specifications, including CSS Regions and CSS Filters, to create powerful responsive designs with Photoshop like visual effects.

Learn more →
Create CSS design styles

Bring life to your design

Just showing responsive behavior is not enough to communicate design vision. Bring your designs to life by adding HTML elements such as buttons, inputs and checkboxes as well as controlling and styling states like ‘hover' and ‘active' on any object in your design.

Preview and share your designs for the browser or on devices

Previewing and sharing

Preview and share your designs in your browser or on a device thanks to integration with Edge Inspect CC. Easily extract CSS from your project for further development in Edge Code CC, Dreamweaver CC, or another code editor of your choice.

Learn to use Reflow

Get up to speed with our new set of Reflow tutorials. Learn the basics, including common tasks like creating breakpoints, designing with web layout, and building out complex responsive designs. Paul Trani walks you through a set of end-to-end tutorials so you can quickly become a pro.

Learn more →

What is new in Edge Reflow CC

Now in Preview 7, you can create and preview the state of your design elements when they are hovered or in focus. You can also add form elements to your designs and link to pages within your project for easy navigation.

See more of what is new in Reflow →

... and more.

Flexible design approach, visual media-query breakpoints, fluid customizable grid system, Edge Web Fonts integration, multiple background layers, border styles and customization
All features →

What people are saying

Starwood Hotels & Resorts“The integration between Photoshop and Edge Reflow allows us to quickly move our designs into prototypes and easily update assets throughout the responsive design process. These new tools and workflows address the new ways the digital design process is evolving.”
Stephen Gates, Vice President of Global Brand Design, Starwood Hotels & Resorts

Crush + Lovely“Edge Reflow has helped us streamline our responsive workflow by enabling us to quickly create a design and see exactly how it will look in the browser at multiple breakpoints.”
Matt Blanchard, Founding Partner, Crush + Lovely

Leo Burnett Worldwide“With Edge Reflow, we really like the multi-page support and the creation of breakpoints for projects. These features help bring together our developers and designers to conceptually elevate and visually develop our web projects faster.”
Ariel Hammer, Digital Art Director, Leo Burnett Worldwide

Voices.com“Edge Reflow allowed our team to do rapid prototypes, understand how our layouts would work at standard screen sizes and ultimately launch our redesigned website faster.”
David Ciccarelli, CEO, Voices.com

All-new Edge Reflow is here. Join Creative Cloud to get Edge Reflow CC and all the tools you need to create, collaborate, and stay connected. Get started with a free Creative Cloud membership.
What is Creative Cloud? →

Edge Reflow Blog

  • Loading...