Supercharge your websites

Unlock the power of CSS

Gradient Text

.gradient-heading {
background: linear-gradient(45deg, var(--colora) 0%, var(--colora2) 100%);
background-clip: text;
color: transparent;
}  Copy

Building amazing Websites

Gradient Border

.gradient-border {
background: linear-gradient(var(--colorbody),  (--colorbody)) padding-box,
linear-gradient(0deg, var(--colora) 0%,  (--colora2)100%) border-box;
border: solid 1px transparent;
}   Copy 

Cards

/* parent card */
.polite-card {max-width: 400px;  display: flex;  flex-direction: column;
background: var(--colors);  border-radius: 8px;  overflow: hidden;}
/* text & button */
.css-card {padding: 20px;}Copy 

The Polite Cat

My face when someone expects me to be excited about something that I'm not excited about.

Learn more

Bland elements 👉 Cards

Check the full code on Codepen 👇Copy

Pick a font size

Hover Effects

.element:hover{scale: 1.05;}Copy 

Scale on Hover

Scale on Hover

Hover Effects - Float

.element:hover{transform: translateY(-4px);}Copy 

Float on Hover

Float on Hover

Hover Effects - Fill

button:hover
{background: linear-gradient(45deg, var(--col0%, var(--colora2) 100%) border-box;}Copy

svg:hover
{fill: var(--colora);}Copy

h1
{color: transparent;
-webkit-text-stroke-color: var(--colora);
-webkit-text-stroke-width: 1px;}
h1:hover{color: var(--colora);}Copy

Dynamic Sizes

p{font-size: 5vw;}Copy

Resize your Window

Dynamic Sizes - Clamp

p{font-size: clamp(36px, 5vw, 72px);}Copy

More Control

Dynamic Sizes - Flexbox

div{display: flex; gap: 20px;}
div:nth-child(1){flex: 1;} div:nth-child(2){flex: 2;} div:nth-child(3){flex: 3;}Copy

Snap Scrolling

parent{scroll-snap-type: y mandatory;} children{scroll-snap-align: start;}Copy

Better Lists

li{list-style: "😎 ";}
li:nth-child(2){list-style: "🍞 ";}
li:nth-child(3){list-style: "👖 ";}Copy

Good Habits

• Wake up before noon
• Eat breakfast
• Put on pants

Links & Buttons

.moody{
padding: 12px 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 0 16px var(--colora);}Copy

.dashing{
background: linear-gradient(var(--colorbody), var(--colorbody)) padding-box, linear-gradient(45deg, var(--colora) 0%, var(--colora2) 100%) border-box; border: solid 2px transparent; border-radius: 8px; text-decoration: none; padding: 12px 20px;}Copy

.crispy{
background: var(--colorbody); color: var(--colora); font: 18px/18px var(--ff); padding: 12px 20px; border: solid 1px var(--colora); box-shadow: 0 2px var(--colora); border-radius: 8px;}Copy

Animations

@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);}}Copy

Look at me

@keyframes pulse {0%, 100% {transform: scale(1);}50% {transform: scale(1.2);}}Copy

@keyframes flip {0%{transform: rotateY(0);}100% {transform: rotateY(360deg);}}Copy

@keyframes rotate {0%{transform: rotate(0deg);}100% {transform: rotate(360deg);}}Copy

Better Shadows

box-shadow: 0px 4px 4px #00000030, 0px 12px 12px #00000015;

Shadows don't work in dark mode, just as in real life

More Features

Coming soon

I will continue to add more features to the list. Please keep an eye out for them.

PS. Feel free to send me CSS features to add to this list.

UI Library - For Design Inspirations

You don't have to waste your time on Dribble, Behance or Instagram.
There is a much easier & better way to get design/UI inspirations.

I use Mobbin, for two reasons:
1. Proven real-world designs
2. Quick and easy to find exactly what I need