Build delightful content
Powerful, user-friendly Firefox Developer Tools for CSS make it possible for you to create flexible layouts with precise control over colors, fonts, and delightful animations in an interface that feels like a blend of your favorite layout, animation, and image-editing tools. Because you're building with CSS, these delightful experiences are performant and cross-platform.
Animate with an artist-friendly interface
Modify keyframes, edit timing precisely with cubic beziers, inspect the synchronized list of animations and transitions, scrub along the timeline, and more.
Precisely control your colors
With an experience more like your favorite graphics tool than a IDE, you can quickly
- Match - Copy any color on the web with the eyedropper tool.
- Inspect and adjust - Click the sample swatches for a CSS color rule or property to make adjustments in the color picker.
- Recolor with filters - In the filter menu, add, remove, and stack color filter effects like saturation, brightness, hue and more
Match, adjust, select
Polish with post-processing effects
The filter menu makes it easy to adjust more than colors. Apply opacity, blur, drop shadow, or even point at a URL to use an effect saved in another file.
Quickly lock in your layout
Want to get started using CSS grid for layout, but having a hard time visualizing how?
With the Grid Inspector, compose and adjust your two-dimensional layouts with ease. Understand flexbox layouts more effectively with the Flexbox Inspector, as well.
Missing the ruler from your favorite layout tool? Now you can measure the distances between elements for precise alignment.
Integrate images elegantly
Used to print layout tools, and missing the ability to precisely adjust text wrapping around images? Firefox DevTools is here to help with the Shape Path Editor
Shape Path Editor
Style fonts and typography with ease
Find out what header font they're using on your favorite website, or inspect all the fonts on the page. Adjust your fonts' size, line height, spacing weight, and emphasis. Can't decide which font to use? Preview text in multiple fonts simultaneously. And if you're using a variable font, adjust its properties exactly to your specifications in the same editor. DevTools even gives you the ability to adjust font values in a unit that makes sense to you, just like your favorite layout tools.
Adapt seamlessly to different screens (and network speeds)
Want to adapt your content for phones, tablets, and even smartwatches? With Responsive Design Mode, easily create flexible, attractive layouts friendly to a variety of screen sizes and resolutions. Live preview how your content will appear on a variety of devices and edit it in realtime. Even create your own device parameters for testing, and simulate the effects of network throttling.
Responsive Design Mode
Avoid compatibility headaches
Beyond screen resolution, different devices and browsers don't support the same features or have the same defaults. Access up-to-date compatibility data as you develop, based on the MDN BCD.
Broke your layout, and not sure when and what you changed? Wondering why your fixes aren't working?
Debugging is easier with track changes and inactive CSS tips.
Want to take a screenshot with one click? You can do that too.