DEV Community

loading...
Cover image for Level Up Your CSS with These 50+ Resources

Level Up Your CSS with These 50+ Resources

hulyakarakaya profile image Hulya Originally published at hulyakarakaya.hashnode.dev ・Updated on ・9 min read

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

animation_500_kmo8fm9q.gif

1.Layoutit Grid

Layoutit grid is a CSS Grid layout generator. Quickly drawdown web page layouts with our clean editor, and get HTML and CSS code to quickstart your next project. Also, you can see the code on CodePen!

Screen Shot 2021-03-24 at 4.28.44 PM.png

2.CSS Grid Generator by Sarah Drasner

Screen Shot 2021-03-24 at 4.31.16 PM.png

3.Grid by Example

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

Screen Shot 2021-03-24 at 4.32.32 PM.png

4.CSS Grid Garden

Grow your carrot garden while learning about CSS Grid.

Screen Shot 2021-03-24 at 4.37.39 PM.png

5.Mastery Games

Here you can play around with Zombies and practice Flexbox; save an adorable alien species while learning CSS Grid.

Screen Shot 2021-03-24 at 4.40.27 PM.png

6.Grid Malven

Grid Cheatsheet.

Screen Shot 2021-03-24 at 5.24.43 PM.png

7.CSS Tricks - A Complete Guide to Grid

Comprehensive guide to CSS grid by CSS Tricks.

Screen Shot 2021-03-24 at 5.29.20 PM.png

8.Cubic Bezier

Quickly generate and preview a cubic-bezier with this tool.

Screen Shot 2021-03-24 at 4.36.34 PM.png

9.CSS Animation

Create your animations with this easy-to-use tool, it's also supporting GSAP.

Screen Shot 2021-03-24 at 4.41.47 PM.png

10.CSS Animation 101 E-book

Screen Shot 2021-03-24 at 5.45.39 PM.png

11.CSS Diner

Practice your CSS positioning skills with CSS Diner.

Screen Shot 2021-03-24 at 4.43.06 PM.png

12.Flexbox Patterns

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

Screen Shot 2021-03-24 at 4.44.30 PM.png

13.Flexbox Froggy

Screen Shot 2021-03-24 at 4.47.00 PM.png

14.Flexbox Cheatsheet

Screen Shot 2021-03-24 at 5.26.55 PM.png

15.Devinduct Flexbox

Preview and see the code for Flexbox.

Screen Shot 2021-03-24 at 5.40.53 PM.png

16.Flexbox Defense

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

Alt Text

17.CSS Tricks Almanac

Screen Shot 2021-03-24 at 5.41.58 PM.png

18.Keyframes

Dead simple visual tools to help you generate CSS for your projects.

Create basic or complex CSS @keyframe animations with a visual timeline editor similar to video-editing software.

Create single or multi-layer box shadows just by moving some sliders. Get the CSS output instantly.

Pick your favorite colors, convert between hex and rgb, and create & save palettes.

Screen Shot 2021-03-24 at 4.50.19 PM.png

19.CSS Selectors Cheatsheet

This cheat sheet is designed for a quick search on CSS selectors.

Screen Shot 2021-03-24 at 4.53.40 PM.png

20.CSS Font Stack

Get Web Safe Fonts and much more from Dan's Tools.

Screen Shot 2021-03-24 at 4.55.24 PM.png

21.Clippy by Bennett Feely

Get your clip-paths and also checkout Bennett Feely's website to see all his tools.

Screen Shot 2021-03-24 at 4.57.53 PM.png

22.Codrops CSS Reference

An extensive CSS reference with all the important properties and info to learn CSS from the basics.

Screen Shot 2021-03-24 at 5.06.14 PM.png

23.CSS Reference

Yet another CSS Reference resource.

Screen Shot 2021-03-24 at 5.24.10 PM.png

24.Frontend Mentor

Frontend Mentor has a lot of projects based on HTML and CSS, you can complete challenges and improve your styles by working on real-life projects.

Screen Shot 2021-03-24 at 5.00.19 PM.png

25.The Code Player

Video style walkthroughs showing cool stuff being created from scratch.

Screen Shot 2021-03-24 at 5.03.06 PM.png

26.CSS DB

cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

Screen Shot 2021-03-24 at 5.26.15 PM.png

27.Border Radius Generator

Screen Shot 2021-03-24 at 5.34.27 PM.png

28.Button Creator

Screen Shot 2021-03-24 at 5.34.41 PM.png

29.Best CSS Button Generator

Screen Shot 2021-03-24 at 5.57.07 PM.png

30.Samantha Ming's Tidbits

Screen Shot 2021-03-24 at 5.34.53 PM.png

31.Specificity Calculator

A visual way to understand CSS specificity. Change the selectors or paste them into your own.

Screen Shot 2021-03-24 at 5.43.01 PM.png

32.Clean CSS

Compress your CSS.

Screen Shot 2021-03-24 at 5.51.04 PM.png

33.100 Days CSS Challenge

Screen Shot 2021-03-24 at 5.52.18 PM.png

34.CSS Layout

A collection of popular layouts and patterns made with CSS.

Screen Shot 2021-03-24 at 5.54.22 PM.png

35.Pattern Generator

Screen Shot 2021-03-24 at 5.59.06 PM.png

36.Paaatterns

Alt Text

37.Pattern Pad

Create unlimited unique design patterns.

Alt Text

38.Pattern CSS

CSS only library to fill your empty background with beautiful patterns.

Alt Text

39.Free Frontend

Free CSS code examples from codepen.io and other resources.

Screen Shot 2021-03-24 at 6.00.46 PM.png

40.Glassmorphism CSS Generator

Screen Shot 2021-03-24 at 6.29.18 PM.png

41.Smol CSS

Minimal snippets for modern CSS layouts and components.

Screen Shot 2021-03-24 at 6.32.58 PM.png

42.Lottie Files

Free animations.

Screen Shot 2021-03-24 at 6.41.45 PM.png

43.Animating Underlines

Michelle Barker shares some fantastic tips about underline styles and animations.

Screen Shot 2021-03-25 at 1.29.36 PM.png

44.Free Fonts by FontShare

The service, named Fontshare, will be familiar to anyone who has used Google Fonts. Browse the fonts list, pick out the styles you want, and add them to your site.

Alt Text

45.BG Jar

Free SVG background generator for your websites, blogs, and app.

Alt Text

46.Get Waves

A free SVG wave generator to make unique SVG waves.

Alt Text

47.Custom SVG Shape Dividers

We created this free tool to make it easier for designers and developers to export a beautiful SVG
shape divider for their latest project. We hope you enjoy this tool.

Alt Text

48.CSS Zen Garden

A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.

Alt Text

49.CSS Minifier

Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.

Alt Text

50.CSS Cheatsheet

List of elements, selectors, and styles with relevant links to their MDN pages.

Alt Text

51.Autoprefixer

Autoprefixer online β€” web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used by Twitter and Taobao.

Alt Text

52.Should I Prefix

This page has one purpose: simply show what prefixes are needed for a newer CSS property.

Alt Text

53.Design Resources for Developers by Brad Traversy

A curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools, and much more.

Alt Text

54.Bem Methodology

BEM stands for "Block, Element, Modifier", it's a naming convention in CSS. Learn more on the official website.

Alt Text

55.CSS Cheatsheet

Alt Text

Wrapping Up

If you like this post, share it on your Twitter account to support me writing more, also you can support me by buying a coffee.

You can follow me on Twitter.

You can check out my other posts.

Discussion (7)

pic
Editor guide
Collapse
shadowfaxrodeo profile image
Nathaniel • Edited

I made #34 – Pattern generator. Appreciate being on the list!

Collapse
hulyakarakaya profile image
Hulya Author

thank you for making it available to use for everyone 😊

Collapse
sojasmine profile image
Sojasmine Gjerstad

Thank you for sharingπŸ₯°.

Collapse
dome68 profile image
Domenico

Amazing collection!!! Thanks.

Collapse
hulyakarakaya profile image
Hulya Author

thanks for the feedback Domenico πŸ‘πŸ»

Collapse
olsard profile image
olsard

Nice! Thanks a lot for sharing!

Collapse
hulyakarakaya profile image
Hulya Author

Thanks for the feedback @olsard πŸ˜ƒ