«   Previous tip Next tip   »

Chrome DevTools: Better CSS presets for quick prototyping

Last updated: 20th July 2020
Better CSS presets for quick prototyping
We're getting closer to tip 200! Thank you for all your feedback

In the past, DevTools would not provide meaningful autosuggest values for certain property values, such as those values which used CSS functions. Now, typing in lin for the background-image property autosuggests:

linear-gradient(45deg, #000, #0000)

Notice that these values are prepopulated in such a way where you can see the visual result on the page immediately. This means you do not have to research the linear-gradient() CSS function signature while prototyping.

Here are other autosuggest examples:

To utilise these preset autocompletions, you can use:

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week