Site Designer's code-free controls allow you to experiment with high-level features without needing to know how the markup is written. Your creativity can run wild! Build utilizing a drag-n-drop workflow in a live browser environment. Then style your content in super speed using clickable controls.
Bootstrap has been the king of the frameworks for a while and is loved by many for its highly styled element classes.
Foundation offers minimal pre-set styles on elements which makes it easier to apply your own customizations.
Materialize is based on Google’s Material Design with interactive components capabilities which make it a rising star!
Frameworkless gives you the freedom to work desktop-down or mobile-first. Create your own styles without frameworks barrier.
Stop paying monthly subscriptions
Get a perpetual license and 1 year of free upgrades with the purchase of any of our products.
Forget repetitive design work and speed up production time using the Component Library. Save and reuse items in other projects.
Turn nav bars, footers, signup forms, and more into symbols you can change across your whole site with a single edit.
Fill a blank canvas with everything HTML5 has to offer. Drag raw elements in and style them as you desire.
The inspector gives you an elaborate overview of the page content. Search terms to drill down to the element level, and review the CSS markup.
Use your javascripts and CSS stylesheets on the <head> or at any place of your page. Enjoy our code editor dialog full screen.
Create seamless layouts by adjusting your columns and rows and span your elements to bring your designs to life. Be there, or be square.
Align, stack, or reorder elements with the flick of a button. It’s a phenomenal instrument that should be part of any responsive design toolkit.
Enjoy the freedom of custom breakpoints at any pixel width. Let your content decide where they are needed and fully control any screen devices.
Easily preview for the wide array of modern devices. You can add any screen size to the device list. You are also able to quickly preview on any browser.
Design for the widest browser support (including the grandpa IE) and enhance for browsers that support the latest and greatest CSS properties.
Work with a CSS-based class system to make style changes across multiple elements at the same time.
Get access to the full Google Fonts library. Edit the typographic parameters, like line-height, kerning, tracking, weights and much more.
Skip photo editing tools and work directly on your page canvas. Apply unique blend modes and effects like overlay, soft light or multiply to create your own brand identity.
Use the picker or the wheel to choose any color, create your palettes, and share them through your projects.
It’s never been easier to put your website online. Publish to a world-class hosting stack that can handle any traffic you throw at it and is secured by HTTPS connection all the way through.
Export clean, semantic and W3C compliant code. Get your HTML & CSS, JavaScript, images, and other assets from your hard drive in a single click.
Add meta data and other head (or footer) code for SEO or plugins. Also activate the Structured Data workflow to tag up your content for Google and other search engines.
Skilled users will love the ability to export an element's markup to CodePen. This way you can use it with a CMS or other place without having to go through a full export.
Begin with a Bootstrap, Materialize, Foundation or Vanila CSS Framework.
Scared of a blank canvas? Get a quick start by choosing one of the professional templates.
Drag-n-drop elements like Containers, Images, Videos, Buttons, Icons and more onto the canvas.
Organize images, documents, and other assets within the Project Resource Library.
Type, paste, or edit text right on the canvas using a powerful text editor.
Code connoisseurs can go wild by injecting HTML scripts using the HTML element.
Padding, Margin, Floats, Display, Position, Overflow, Border (radius), Background (image), Width (min, max), Height (min, max), Scale, Translate, Rotate, Skew, Opacity, Box Shadow, Transitions to name a few.
Padding, Margin, Floats, Display, Position, Overflow, Border (radius), Background (image), Width (min, max), Height (min, max), Scale, Translate, Rotate, Skew, Opacity, Box Shadow, Transitions to name a few.
Design for interaction with hover, active and pressed state controls. Create powerful 3D effects that will make the site content come alive.
Adapt the layout or tweak the design at any display width using custom breakpoints.
Full range viewport slider — view and work on the design at any possible screen width.
Focus the viewer's attention on a specific area of the image with the focal point function.
Use the HTML Picture element to serve mobile users optimized or smaller versions of an image. Bandwidth saver!
Build site using mobile first or desktop down workflows with corresponding media queries.
Integrated web inspector with spacing outliner, DOM tree and live CSS preview.
A very powerful way of controlling alignment, size and positioning of elements. Also, elements can be instructed to grow, shrink and wrap (or not) depending on the size of the viewport.
Use CSS Grid for a modular design approach — each page section is done in a dedicated (grid) container. This makes it easy to move the sections around or reuse them in different pages. Includes Feature Queries to create fallback styles for older (unsupporting) browsers.
Sublime Container management: span, offset, push and pull with simple drop downs. Containers can be constrained to certain widths or span full-width for appealing visual (background) effects.
Choose from standard positioning controls: Absolute, Static, or Fix content. You can also place elements outside of the flow with these comprehensive tools.
Change the method of measurement on the fly – EM, PX, %, VH, Auto, and more.
Add meta data and other head (or footer) code for SEO or plugins. Also activate the Structured Data workflow to tag up your content for Google.
Publish directly to the CoffeeCup servers and share the link for feedback and collaboration.
Export clean, semantic, HTML & CSS that can be uploaded to any server
(Includes any added plugins).
Free support and upgrades during one full year for customers from our savvy technical staff. Also gain access to our robust User Community Forums to swap ideas, share content, get feedback, even make a friend or two!
Enjoy one year of free upgrades with the purchase of your perpetual Site Designer license. This means after the one year, you can still keep on using the software as much as you want, another year of free upgrades will be available for $69 per year.
Browse our growing library of responsive website templates. Download one or them all! Each theme can be tailored to fit your specific needs. Open the templates in the HTML Editor to edit the code manually, or modify them visually using the powerful Site Designer.
