Pratham Profile picture
8 Apr, 31 tweets, 15 min read
These 30 free CSS generators can help you immensely and save you a lot of time

Mega Thread 🧵
1️⃣ Animation Generator

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

2️⃣ Palette Ninja

- Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds.

3️⃣ Layout Generator

- Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.

4️⃣ Pattern generator

- It lets you create background pattern for free

5️⃣ Stripes generator

- Pure CSS Stripes Generator that you can use for backgrounds.

6️⃣ CSS Accordion Slider Generator

- Create fully responsive, css only accordion sliders

7️⃣ Navbar Generator

- You can generate 5 types of nav bar using few clicks, which are fully responsive

8️⃣ Mesh Gradient

- Mesh is a simple way to create beautiful, unique gradients using shaders

9️⃣ Flexbox

- Generate flexbox without actually writing the CSS

🔟 Shapes maker

- Create complex shapes using CSS clip-path property

1️⃣1️⃣ CSS Box Shadow Generator

- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects

1️⃣2️⃣ Glassmorphism

- Generate glassmorphic design easily

1️⃣3️⃣ Cool Backgrounds

- Explore a beautifully curated selection of cool backgrounds that you can add to your next project

1️⃣4️⃣ Pixel art

- Create CSS pixel art, export the results to CSS and download them.

1️⃣5️⃣ SVG waves

- It's not a CSS generator but very handy tool. You can create the layers of waves and simply export either in SVG or PNG

1️⃣6️⃣ Color theme generator

- A great tool for CSS dark/light theme

1️⃣7️⃣ Neumorphic Design

- CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

1️⃣8️⃣ Smooth Shadow

- Another shadow generator with great UI

1️⃣9️⃣ SVG waves

- Make some waves!

2️⃣0️⃣ CSS Button Generator

- You don't have to learn any complex CSS rules . Just click and slide to make CSS3 Buttons. Lots of pretty button samples.

2️⃣1️⃣ Blob Maker

- Help you quickly create random, unique, and organic-looking SVG shapes.

2️⃣2️⃣ Border-radius

- Create fancy shapes using border-radius CSS property

2️⃣3️⃣ Gradient generator

- As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile

2️⃣4️⃣ Best css button generator

- CSS Button Generator is a free online tool that allows you to create cross browser HTML and CSS button styles.

2️⃣5️⃣ Grid Layout generator

- The Quickest & Easiest Way To Build Complex CSS Grid Layouts.

2️⃣6️⃣ Animista

- Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

2️⃣7️⃣ CSS animate

- Online tool for creating native CSS3 Keyframes Animation. You can easy and fast generate consistent CSS3 animation using simple UI without any coding.

2️⃣8️⃣ Glassmorphism

- Glassmorphism is a unified name for the popular Frosted Glass aesthetic.

2️⃣9️⃣ Image Filter

- Create a sharable URL of your custom filter using Create URL or Save your filter

3️⃣0️⃣ Loader

- Free CSS loaders


• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Pratham

Pratham Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

10 Apr
Complete guide to Responsive Web Design

🧵👇🏻 Image
In order to make a RWD, you just need to consider one thing.

"Ability of content to fit inside any device that look good and it will be for user to interact with that"

{ 2 / 16 }
Responsive web design is not a kind of program or framework. We can say it's a combination of various concepts using which we try to make our web page look good on all devices

The great thing is that you can achieve RWD using HTML and CSS only⚡

{ 3 / 16 }
Read 16 tweets
10 Apr
Are you planning to learn React in 2021? Here are some free courses for you

🧵 👇🏻
1️⃣ Course on Scrimba

You'll learn key React features while building two apps and practice what you learn through interactive coding challenges and exercises along the way.

🔗… Image
2️⃣ Course on Codecademy

You’ll develop a strong understanding of React’s most essential concepts: JSX, class and function components, props, state, lifecycle methods, and hooks. And able to combine these ideas in React’s modular programming style

🔗 Image
Read 6 tweets
9 Apr
These 9 websites will help you improve your JavaScript knowledge

1️⃣ JavaScript visualizer

- A great visualizer for JavaScript code

2️⃣ JavaScript Tutorial

- This JavaScript Tutorial helps you learn JavaScript programming language from scratch quickly and effectively.

🔗 Image
Read 11 tweets
8 Apr
I compiled 22 cheat sheets in a single PDF. If you are interested, you can download it for absolutely free

Table of content

1. Grid cheat sheet
2. Two axes of Flexbox
3. Alignment in layouts
4. Alignment in layouts (older version)
5. Grid overview
6. Flex cheat sheet
7. Display
8. Positioning in CSS
9. CSS selectors
10. animation-timing-function
11. CSS Box-model
12. Z-index
13. Semantic elements
14. Border-style
15. CSS pseudo classes
16. DOM addEventListener method
17. JavaScript Array methods
18. Arrow function
19. DOM
20. Functions
21. Tailwind Flex classes
22. Git workflow
Read 4 tweets
8 Apr
5 HTML features probably you haven't heard yet

Thread 🧵👇🏻
1️⃣ enterkeyhint attribute

The enterkeyhint is a global attribute defines the action for "enter" key on virtual keyboard

It accpets the following values 👇🏻
2️⃣ sizes attribute

You may have heard about "size" attribute but did you know about "sizes" attribute?

The sizes attribute specifies the sizes of icons for visual media.

Check the compatibility here
Read 8 tweets
7 Apr
Everything you need to know about CSS Flex layout

A Thread🧵
Start appyling display: flex; property to parent element
This will take the all the elements in horizontal direction

{ 2 / 16 }
You can also change the direction of elements. For doing so, you need to mention the "flex-direction" property

The flex-direction property specifies the direction of the items within the flex container

{ 3 / 16 }
Read 16 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!