cccreate

a carefully curated collection of tools & resources for web creators

submit
share ↷

color/gradients

screenshot: pppalette
pppalette
color palette generator
screenshot: cccolor
cccolor
clean & simple color picker
screenshot: Huemint
Huemint
AI color palette generator
screenshot: couleur.io
couleur.io
create harmonizing color palettes
screenshot: Color Hunt
Color Hunt
good-looking color palettes
screenshot: Hypercolor
Hypercolor
gradients using Tailwind CSS colors
screenshot: HTML Color Codes
HTML Color Codes
color picker
screenshot: Happy Hues
Happy Hues
colors in context
screenshot: Colorable
Colorable
check color contrast
screenshot: CSS Gradient
CSS Gradient
gradient generator
screenshot: Color Gradient Generator
Color Gradient Generator
another gradient generator
screenshot: Easing Gradients
Easing Gradients
create smoother gradients
screenshot: Color Palette Generator
Color Palette Generator
screenshot: Cohesive Colors
Cohesive Colors
create cohesive color palettes
screenshot: Accessible Palette
Accessible Palette
accessible color palettes using LCh
screenshot: HSL Color Finder
HSL Color Finder
Find tints, shades & color harmonies
screenshot: Gradient Generator
Gradient Generator
lush CSS gradients
screenshot: hue.tools
hue.tools
color tools
screenshot: mesher
mesher
CSS mesh gradients

layout

screenshot: CSS Grid Generator
CSS Grid Generator
CSS grid generator
screenshot: layoutit!
layoutit!
another CSS grid generator
screenshot: 1-Line Layouts
1-Line Layouts
CSS for basic layouts
screenshot: Flexbox Patterns
Flexbox Patterns
CSS for common flexbox patterns
screenshot: CSS LAYOUT
CSS LAYOUT
popular CSS layouts & patterns

typography

screenshot: system font stack
system font stack
CSS for default font stacks
screenshot: google-webfonts-helper
google-webfonts-helper
self-host Google fonts
screenshot: FontSpark
FontSpark
find good looking fonts
screenshot: Type Scale
Type Scale
type scale generator
screenshot: Type Scale Clamp Generator
Type Scale Clamp Generator
type scale using CSS clamp()
screenshot: The Good Line Height
The Good Line Height
screenshot: Lorem Ipsum
Lorem Ipsum
lorem ipsum generator
screenshot: Fluid Typography
Fluid Typography
text that scales using CSS clamp()
screenshot: Font Style Matcher
Font Style Matcher
minimize flash of unstyled text
screenshot: Modern fluid typography editor
Modern fluid typography editor
screenshot: Fluid Type Scale Calculator
Fluid Type Scale Calculator

icons

screenshot: Feather
Feather
screenshot: ICONSVG
ICONSVG
screenshot: Heroicons
Heroicons

animation

screenshot: Cubic Bezier
Cubic Bezier
generate custom easings
screenshot: Keyframes
Keyframes
helper for CSS animations
screenshot: Easings.net
Easings.net
cheat sheet of easing functions

shapes/patterns

screenshot: ssshape
ssshape
SVG blob/shape generator
screenshot: llline
llline
SVG line/stroke generator
screenshot: bbburst
bbburst
generate explosions of SVG shapes
screenshot: fancy-border-radius
fancy-border-radius
Create interesting border radius shapes
screenshot: Clippy
Clippy
clip-path maker
screenshot: Blobmaker
Blobmaker
make blob SVG shapes
screenshot: Get Waves
Get Waves
make wave SVG shapes
screenshot: Squircley
Squircley
make organic square-ish shapes
screenshot: Mesh Gradient
Mesh Gradient
generate mesh gradient images
screenshot: Dither Me This
Dither Me This
creative way of reducing image size
screenshot: Doodad Pattern Generator
Doodad Pattern Generator
fun SVG pattern generator
screenshot: Shape Divider
Shape Divider
SVG shapes to divide content
screenshot: MESH·Y
MESH·Y
mesh gradients
screenshot: Svg Wave
Svg Wave
wave generator
screenshot: Polka Dot Generator
Polka Dot Generator

docs/reference

screenshot: Mozilla Developer Network
Mozilla Developer Network
standards reference
screenshot: Can I Use
Can I Use
browser support check
screenshot: <HEAD>
<HEAD>
stuff that goes in your <head>
screenshot: HTML Arrows
HTML Arrows
HTML entities for arrows
screenshot: CSS Reference
CSS Reference
screenshot: HTML Reference
HTML Reference
screenshot: SmolCSS
SmolCSS
snippets for modern CSS
screenshot: 1 LOC
1 LOC
1-line JavaScript utilities
screenshot: HTML DOM
HTML DOM
vanilla JS DOM manipulation

misc

screenshot: Glassmorphism CSS Generator
Glassmorphism CSS Generator
screenshot: Glassmorphism Generator
Glassmorphism Generator
another glassmorphism generator
screenshot: Squoosh
Squoosh
Image optimizer
screenshot: Meta Tags
Meta Tags
Preview social & search display
screenshot: Hero Generator
Hero Generator
nice gradients for your hero section
screenshot: Smooth Shadow
Smooth Shadow
generate smoother box shadows
screenshot: Shadow Palette Generator
Shadow Palette Generator
generate sets of realistic shadows
screenshot: Buttons Generator
Buttons Generator
screenshot: Omatsuri
Omatsuri
collection of useful tools
screenshot: CSS Duotone Generator
CSS Duotone Generator
screenshot: Hola SVG
Hola SVG
animated SVG loaders
screenshot: SVG Filters
SVG Filters
playground for SVG filters
screenshot: SVG Code
SVG Code
transform raster images to SVG

hey, I'm Seb 👋

I've put this page together because I was tired of keeping the tools that help me with web design in different bookmark folders where things would easily get lost. I'm hoping this page can be useful for others too. Maybe you'll discover a few tools you didn't know about.

I'm currently enjoying building interactive tools to learn music theory over at muted.io. Check out my about page, or visit my personal website to see some of my other projects on the web.