Overview
A quick generator for organic blob shapes using the eight-value elliptical border-radius trick. Two sliders drive the top-left and bottom-right curvature, a Randomize button explores combinations, and the output emits the full border-radius value plus a ready-made gradient background and shadow. The preview shows the blob at 176 pixels with a smooth 300 millisecond morph.
How It Works
Drag the Top-Left Curve and Bottom-Right Curve sliders, each from 10 to 90 percent, to reshape the blob. Press Randomize Shape to set both, and the derived values, to random amounts in the same range. Copy CSS emits three declarations: the eight-value border-radius, a fixed indigo-to-purple linear-gradient background, and a large soft shadow tinted to match. The preview transitions smoothly between shapes as you drag.
Step-by-Step Usage Guide
- Drag the two curvature sliders until the silhouette looks right.
- Or press Randomize Shape for a surprise form.
- Copy the three-declaration CSS.
- Recolor the background and shadow to match your palette.
Technical Specifications & Standards
The emitted radius string follows the slash syntax with a complementary structure: the horizontal radii are your two chosen values and their complements, 100 minus each, while the vertical radii use two more derived values the same way. Complementary pairs are what keep the outline convex and smooth; two large adjacent radii without the complement would flatten the edge between them into a straight line. Only two degrees of freedom are exposed even though border-radius accepts eight, which keeps the output reliably blobby; for full control the border-radius generator in this suite exposes all eight. The background in the output is hardcoded to a 135 degree indigo-to-purple gradient and the shadow to a matching indigo tint, so recolor both after pasting. The shape itself is size-independent in percent form, which is why the same radius string works on any square element.
Targeted Use Cases
- Hero illustration containers with a soft organic silhouette.
- Avatar frames and blob-shaped feature badges.
- Decorative background shapes behind cards.
- Animated morphs between blob forms using the same eight-value syntax.
Notes & Gotchas
- Keep the blob on a square element; on rectangles the percent radii produce ellipses that read as lopsided.
- Recolor the hardcoded gradient background after copying.
- Animate border-radius between two eight-value strings for a morphing effect; both shapes interpolate because they share the syntax.
- Avoid very small values on both sliders unless you want a near-square with two soft corners.
Frequently Asked Questions
Why only two sliders for an eight-value property?
The other six values are derived: the tool fills in complements, 100 minus each chosen value, so the outline stays smooth and convex. Exposing all eight would allow flat edges and pinched corners.
Can I change the blob's colors?
The output hardcodes an indigo-to-purple gradient and an indigo-tinted shadow. Replace the background and box-shadow declarations after copying; the border-radius line is independent of color.
Will the same value work at different sizes?
Yes. The radii are percentages, so they scale with the element. The same string produces the same relative shape on a 60 pixel icon and a 600 pixel hero container.
How do I animate between two blob shapes?
Copy a second radius string from another setting and transition border-radius between them. Interpolation works because both values have the same eight-component slash structure.