CSS Underline Generator
Create beautiful, customizable underlines for your website with our free
CSS Underline Generator. Instantly preview and copy CSS for solid,
dotted, dashed, wavy, zigzag, and gradient underlines. Adjust thickness,
color, position, and pattern to match your design needs.
Features
-
Live Preview: Instantly see how your underline will
look as you adjust settings. The preview updates in real time, so you
can experiment with different styles and find the perfect underline
for your text.
-
Color Customization: Choose any underline color using
a color picker. Enable gradients to blend two colors together, and
adjust the gradient direction for unique effects.
-
Dimensions Control: Fine-tune the underline’s
thickness, vertical position (top or bottom), and padding. This allows
you to match the underline perfectly to your font and layout.
-
Pattern Selection: Select from multiple underline
patterns including solid, dotted, dashed, wavy, and zigzag. Each
pattern gives your text a distinct visual style.
-
Edge Style: Add creative flair to your underline with
skewed edges. Choose from no edge, skew left, skew right, or skew both
for dynamic underline shapes.
-
Layer Position: Decide whether the underline appears
behind or in front of your text for different visual effects.
-
SVG Decoration (Coming Soon): Soon, you’ll be able to
add custom SVG patterns to your underlines for even more creative
possibilities.
-
Copy CSS Instantly: With one click, copy the
generated CSS code and use it in your own projects. The code is ready
to paste into your stylesheet.
How to Use
- Customize your underline using the controls below
- Preview the effect in real time
- Copy the generated CSS and apply it to your website
Perfect for web designers, developers, and anyone looking to enhance
text decoration with modern CSS effects.