How to Create CSS Clip-Path Shapes and Text Shadow Effects With Live Controls
Learn how to pick a triangle, circle, hexagon or inset clip-path preset, tune a text-shadow with offset and blur sliders, and copy the CSS.
Clip-Path & Shape Studio
Introduction
Clip-path polygons use percentage coordinate lists that are hard to picture from the code alone, and text-shadow needs the right offset and blur balance to read as a glow rather than a smudge. The Clip-Path & Shape Studio renders both on sample elements as the controls change. It runs entirely in the browser and produces two short CSS rules ready to copy.
Step-by-Step Instructions
- Choose a preset under Clip-Path & Shape Generator: Triangle, Circle, Hexagon or Inset Box.
- Check the clipped square in the preview panel, then press Copy CSS below the CSS Code block to copy the clip-path rule.
- Move to Text Shadow & Glow Generator and set Shadow Offset X and Shadow Offset Y, each from -20 to 20px.
- Adjust Blur Radius from 0 to 30px until the Glowing Text sample looks right.
- Press Copy CSS under the second CSS Code block to copy the text-shadow rule.
Key Use Cases
- Section Dividers: Copy the triangle polygon to clip a colored band into an angled page break.
- Avatar Masks: Use the circle preset to crop a square profile image without editing the file.
- Heading Glow: Set a zero offset with a wide blur to give a dark heading a soft colored halo.
Frequently Asked Questions
Can the polygon points be edited?
No. The four presets are fixed values: polygon(50% 0%, 0% 100%, 100% 100%) for Triangle, circle(50% at 50% 50%) for Circle, a six-point polygon for Hexagon and inset(10% 20% 10% 20% round 10px) for Inset Box. Copy the rule and change the percentages in a stylesheet to adjust the shape.
What color does the text shadow use?
The shadow color is fixed at #6366f1, an indigo tone, and only the X offset, Y offset and blur are adjustable. The output is written as text-shadow: Xpx Ypx Bpx #6366f1; so the hex value can be swapped after copying.
Does Copy CSS show a confirmation?
On this page the Copy CSS links write straight to the clipboard without changing their label. Paste into an editor to confirm the rule was copied; the text in the CSS Code block is exactly what is sent.