Hello everyone, today I willshare38 CSS tools that you can use to create beautiful styles.

1, Layoutit Grid

Address: https://grid.layoutit.com //

Layoutit grid is a CSS Grid layout generator. Use the clean editor to quickly draw web page layouts and get HTML and CSS code to jump-start your next project. You can also see the code on CodePen!

2. Sarah Drasner's CSS Grid Generator

Address: https://cssgrid-generator.netlify.app/

This site is a collection of samples, videos, and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew.

3, Grid by Example

Address: https://gridbyexample.com/

4. CSS Grid Garden

Address: https://cssgridgarden.com/

Grow your carrot garden while learning CSS Grid.

5, Mastery Games

Address: https://mastery.games/

Here, you can lay around zombies and practice Flexbox; saving a cute alien species while learning CSS Grid.

6, Grid Malven

Address: https ://grid.malven.co/

7, CSS Tricks

Address: https://css-tricks.com/snippets/css/complete-guide-grid/

CSS Tricks A comprehensive guide to CSS Grid.

8, Cubic Bezier

Address: https://cubic-bezier.com/#.17,.67,.83,.67

Use this tool to quickly generate preview cubic Bezier curves.

9, CSS animation

Address: http://cssanimation.io/

Use this tool to create your animation very easily, it also supports GSAP.

10. CSS Animation 101 eBook

Address: https://cssanimation.rocks/css-animation-101/

11. CSS Dinner

Address: https://flukeout.github.io/

Practice your CSS positioning skills with CSS Diner.

12. Flexbox mode

Address: https://www.flexboxpatterns.com/

Here you can get a lot of tips and patterns for using Flexbox.

13, Flexbox Froggy

Address: https://flexboxfroggy.com/

14, Flexbox Cheatsheet

Address: https://darekkay.com/flexbox-cheatsheet/

15, Devinduct Flexbox

Address: https://devinduct.com/workshop/flexbox

16、Css - tricks

Address: https://css-tricks.com/almanac/

17, Keyframes

Address: https://keyframes.app/

Simple visual tool to help you generate CSS for your project.

A visual editor similar to video editing software, which can create basic or complex animation effects with CSS.

Create single or multiple layers of box shadows by simply moving a few sliders. And can get CSS output.

Choose your favorite colors, convert between hexadecimal and RGB, and create and save palettes.

18. CSS selector cheat sheet

Address: https://frontend30.com/css-selectors-cheatsheet/

This tool is designed to quickly query and search CSS selectors.

19, CSS font stack

Address: https://www.cssfontstack.com/

Get web safe fonts and more from Dan's tool.

20, Bennett Feely's Clippy

Address: https://bennettfeely.com/clippy/

A tool to get your clipping path.

21, Codrops CSS Reference

Address: https://tympanus.net/codrops/css_reference/

contains all important properties and a reference of extensive CSS information to help you learn CSS from the basics.

22, CSS Reference

Address: https://cssreference.io/

This is another CSS reference resource.

23, Frontend Mentor

Address: https://www.frontendmentor.io/

Frontend Mentor has lots of HTML and CSS based projects where you can complete challenges and improve your style with real projects.

24, code player

Address: https://thecodeplayer.com/

Video style walkthrough showing cool stuff created from scratch.

25, CSS Database

Address: https://cssdb.org/

cssdb is a comprehensive list of CSS features and their place in becoming an implemented web standard.

26, border radius generator

Address: https://border-radius.com/

27. CSS Button Creator

Address: https://cssbuttoncreator.com/

28, CSS button generator

Address: https://www.bestcssbuttongenerator.com/

29, Samantha Ming

Address: https://www.samanthaming.com/

30、Specificity

Address: https://specificity.keegan.st/

An intuitive way to understand CSS specificity. Change the selector or paste your own.

31, Clean CSS

Address: https://www.cleancss.com/css-minify/

Minify your CSS.

32, 100 Day CSS Challenge

Address: https://100dayscss.com/

33、Csslayout

Address: https://csslayout.io/

A collection of popular layouts and patterns made with CSS.

34、Pattern-Generator

Address: https://doodad.dev/pattern-generator/

35、Free Frontend

Address: https://freefrontend.com/css-code-examples/

Free CSS code samples from codepen.io and other sources.

36. Glassmorphism CSS Generator

Address: https://hype4.academy/tools/glassmorphism-generator

37, Smol CSS

Address: https://smolcss.dev/

Minimal snippet for modern CSS layouts and components.

38, Lottie file

Address: https://lottiefiles.com/featured

English | https://hulyakarakaya.medium.com/level-up-your-css-with-these-38-resources-c0de7ecd8714
Translation | Yang Xiaoer | Web front-end development

Recommended reading:

9 useful UI resource websites, collect them! !
10 clear, practical and professional JavaScript code snippets
The most complete Vue front-end code style guide in history
In 2021, nine recommended VUE3 UI frameworks
Recommend 130 websites that make you shine, there is always one you need
33 interview questions with 99% appearance rate of Vue in simple terms

VUE Chinese Community

Programming Skills · Industry Secrets · Technology Trends

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/38%20CSS%20Resources%20to%20Upgrade%20Your%20CSS%20Skills.html

38 CSS Resources to Upgrade Your CSS Skills