|
/
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-[#3fb950] to-[#58a6ff] flex items-center justify-center"><span class="font-black text-sm text-white">C3</span></div><span class="font-bold text-lg tracking-tight text-foreground hidden sm:inline-block">css3<span class="text-[#3fb950]">.com</span></span>
|
|
|
/tools
|
Tools
|
|
|
/tools/generators
|
Generators
|
|
|
/tools/layouts
|
Layouts
|
|
|
/learn
|
Learn
|
|
|
/tools
|
Explore Tools
|
|
|
/tools/css-gradient-generator
|
CSS Gradient
|
|
|
/tools/box-shadow-generator
|
Box Shadow
|
|
|
/tools/border-radius-generator
|
Border Radius
|
|
|
/tools/glassmorphism-generator
|
Glassmorphism
|
|
|
/tools/neumorphism-generator
|
Neumorphism
|
|
|
/tools/text-shadow-generator
|
Text Shadow
|
|
|
/tools/clip-path-generator
|
Clip Path
|
|
|
/tools/css-shape-generator
|
CSS Shape
|
|
|
/tools/button-generator
|
Button Generator
|
|
|
/tools/flexbox-generator
|
Flexbox Builder
|
|
|
/tools/css-grid-generator
|
CSS Grid Generator
|
|
|
/tools/css-minifier
|
CSS Minifier
|
|
|
/tools/animation-keyframe-generator
|
Keyframe Generator
|
|
|
/tools/css-gradient-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#3fb95015;color:#3fb950"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette h-6 w-6" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">CSS Gradient Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Create stunning linear and radial CSS gradients with color pickers and angle controls.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/tools/box-shadow-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#8b949e15;color:#8b949e"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box h-6 w-6" aria-hidden="true"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path><path d="m3.3 7 8.7 5 8.7-5"></path><path d="M12 22V12"></path></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Box Shadow Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Visually generate box shadows with offset, blur, spread, color control, and inset option.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/tools/border-radius-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#bc8cff15;color:#bc8cff"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rectangle-horizontal h-6 w-6" aria-hidden="true"><rect width="20" height="12" x="2" y="6" rx="2"></rect></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Border Radius Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Fine-tune all four corners of border-radius independently and get the CSS instantly.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/tools/glassmorphism-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#58a6ff15;color:#58a6ff"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-glass-water h-6 w-6" aria-hidden="true"><path d="M5.116 4.104A1 1 0 0 1 6.11 3h11.78a1 1 0 0 1 .994 1.105L17.19 20.21A2 2 0 0 1 15.2 22H8.8a2 2 0 0 1-2-1.79z"></path><path d="M6 12a5 5 0 0 1 6 0 5 5 0 0 0 6 0"></path></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Glassmorphism Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Create beautiful frosted glass UI effects with backdrop-filter blur and transparency.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/tools/neumorphism-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#8b949e15;color:#8b949e"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers h-6 w-6" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Neumorphism Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Design soft, extruded UI elements (soft UI) with auto-calculated light and dark shadows.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/tools/text-shadow-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#39d2c015;color:#39d2c0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type h-6 w-6" aria-hidden="true"><path d="M12 4v16"></path><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"></path><path d="M9 20h6"></path></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Text Shadow Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Add depth to your typography with customizable text shadows, colors, and blur effects.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/tools/clip-path-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#58a6ff15;color:#58a6ff"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors h-6 w-6" aria-hidden="true"><circle cx="6" cy="6" r="3"></circle><path d="M8.12 8.12 12 12"></path><path d="M20 4 8.12 15.88"></path><circle cx="6" cy="18" r="3"></circle><path d="M14.8 14.8 20 20"></path></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Clip Path Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Create complex shapes with CSS clip-path using 16+ presets or enter custom polygon values.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/tools/css-shape-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#f778ba15;color:#f778ba"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes h-6 w-6" aria-hidden="true"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"></path><rect x="3" y="14" width="7" height="7" rx="1"></rect><circle cx="17.5" cy="17.5" r="3.5"></circle></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">CSS Shape Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Generate pure CSS shapes - circles, triangles, hearts, stars, rings, and more.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/tools/button-generator
|
<div class="p-5 flex flex-col gap-4 h-full"><div class="w-11 h-11 rounded-lg flex items-center justify-center" style="background-color:#f0883e15;color:#f0883e"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mouse-pointer-click h-6 w-6" aria-hidden="true"><path d="M14 4.1 12 6"></path><path d="m5.1 8-2.9-.8"></path><path d="m6 12-1.9 2"></path><path d="M7.2 2.2 8 5.1"></path><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"></path></svg></div><div class="flex-1 space-y-2"><h2 class="text-lg font-semibold tracking-tight group-hover:text-[#3fb950] transition-colors">Button Generator</h2><p class="text-sm text-muted-foreground leading-relaxed">Design fully customizable buttons with colors, borders, shadows, hover effects, and transitions.</p></div><div class="flex items-center text-xs font-medium text-muted-foreground group-hover:text-[#3fb950] transition-colors pt-2 border-t border-border/60">Open Tool<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div>
|
|
|
/
|
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-[#3fb950] to-[#58a6ff] text-white font-extrabold text-sm">C3</div><span class="text-lg font-bold tracking-tight text-foreground group-hover:text-[#3fb950] transition-colors">css3.com</span>
|
|
|
/tools/generators
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paint-bucket h-3.5 w-3.5 text-[#3fb950]" aria-hidden="true"><path d="M11 7 6 2"></path><path d="M18.992 12H2.041"></path><path d="M21.145 18.38A3.34 3.34 0 0 1 20 16.5a3.3 3.3 0 0 1-1.145 1.88c-.575.46-.855 1.02-.855 1.595A2 2 0 0 0 20 22a2 2 0 0 0 2-2.025c0-.58-.285-1.13-.855-1.595"></path><path d="m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33"></path></svg><span class="truncate">CSS Generators</span>
|
|
|
/tools/layouts
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard h-3.5 w-3.5 text-[#58a6ff]" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg><span class="truncate">Layout Builders</span>
|
|
|
/tools/animations
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap h-3.5 w-3.5 text-[#f0883e]" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><span class="truncate">CSS Animations</span>
|
|
|
/tools/optimization
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor h-3.5 w-3.5 text-[#39d2c0]" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg><span class="truncate">Optimization</span>
|
|
|
/tools
|
<span class="truncate">View All Tools →</span>
|
|
|
/about
|
About Us
|
|
|
/contact
|
Contact Us
|
|
|
/privacy-policy
|
Privacy Policy
|
|
|
/cookie-policy
|
Cookie Policy
|
|
|
/terms-of-use
|
Terms of Use
|
|
nginx