Blob Maker Guide
Blobs are soft organic shapes with irregular, smooth edges — the design trend behind countless hero backgrounds, avatars, and section dividers since 2020. The classic CSS trick uses an 8-value border-radius to bend a plain rectangle into an organic form.
Click Randomize to generate a new shape, drag the curvature slider to make edges rounder or more eccentric, and pick a color. Copy the border-radius code directly into your CSS — no images, no SVG files, fully responsive.
Pro Tips
- Blobs look best at large sizes with soft gradients. Apply your blob as a decorative background with a subtle animation for extra polish: @keyframes morph { 50% { border-radius: different values; } }.
- Use low-opacity blobs behind text for depth. A few large, slowly drifting blobs create a modern hero background without distracting from the content.
Frequently Asked Questions
Q: How does the border-radius blob trick work?
How does the border-radius blob trick work? The 8-value syntax border-radius: a b c d / e f g h sets different horizontal and vertical radii per corner. Asymmetric values distort the rectangle into smooth organic shapes.
Q: Can blobs be animated?
Can blobs be animated? Yes. Animate border-radius between two organic value sets with @keyframes or a transition, and the shape morphs smoothly — the signature "morphing blob" effect.
Q: Are blobs still trendy in 2026?
Are blobs still trendy in 2026? Yes. Organic shapes evolved from a 2020 trend into a staple of modern design — see Stripe, Vercel, and countless SaaS heroes. They pair perfectly with glassmorphism and gradients.
Q: SVG or CSS for blobs?
SVG or CSS for blobs? CSS border-radius is lighter and easier to edit, perfect for decorative backgrounds. SVG paths give precise control for logos and illustrations, at the cost of complexity.
Q: How do I use a blob as a background?
How do I use a blob as a background? Create a positioned div with the blob border-radius, set a low z-index, add a gradient fill and optional blur, and place content above it. Animate it slowly for a living background.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.