Advanced Text Shape Designer: The Ultimate Web Typography Tool
The Advanced Text Shape Designer is a comprehensive, all-in-one web-based tool that empowers users to create stunning text designs with unprecedented flexibility and creative control. This powerful application features an extensive library of over 100 carefully curated fonts, including 50+ English typefaces and 50+ Arabic fonts specifically optimized for Middle Eastern languages. Users can work with large text areas to compose lengthy content in both languages simultaneously, with real-time preview that instantly reflects every adjustment. The tool provides granular control over every aspect of typography design – from basic font size (ranging from 12px to 120px) and color selection to advanced styling options like border customization, shadow effects, padding adjustments, and 360-degree rotation capabilities. The interface is thoughtfully organized with tabbed navigation separating English and Arabic font selections, making it easy for designers to switch between different script requirements while maintaining a seamless workflow.
Professional-Grade Design Features and Export Capabilities
Beyond basic text styling, this advanced designer offers eight distinct shape containers including rectangles, rounded corners, perfect circles, ovals, diamonds, speech bubbles, stars, and hearts – each fully customizable with the complete set of styling parameters. The live preview panel displays designs in high fidelity, allowing creators to visualize exactly how their text will appear before exporting. When the design is perfected, users have multiple export options: they can either copy the clean, production-ready HTML and CSS code for direct implementation into web projects, or download the design as a high-quality PNG image with transparent background, perfect for social media graphics, presentations, or print materials. Built with modern web technologies including html2canvas for image rendering, this tool functions entirely in the browser without requiring any software installation, making it accessible to marketers, content creators, and developers alike for rapid prototyping and professional design creation.
.embedded-text-designer {
font-family: \’Segoe UI\’, Tahoma, Geneva, Verdana, sans-serif;
max-width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 20px;
margin: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.etd-header {
text-align: center;
color: white;
margin-bottom: 20px;
}
.etd-header h2 {
font-size: 1.8rem;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.etd-header p {
opacity: 0.9;
font-size: 1rem;
}
.etd-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.etd-controls {
flex: 1;
min-width: 300px;
background: rgba(255,255,255,0.95);
border-radius: 12px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.etd-preview {
flex: 1;
min-width: 300px;
background: rgba(255,255,255,0.95);
border-radius: 12px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.etd-panel-title {
color: #764ba2;
font-size: 1.2rem;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 2px solid #667eea;
display: flex;
align-items: center;
gap: 8px;
}
.etd-control-group {
margin-bottom: 15px;
}
.etd-control-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #764ba2;
font-size: 0.9rem;
}
.etd-textarea {
width: 100%;
min-height: 100px;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
resize: vertical;
transition: all 0.3s;
}
.etd-textarea:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
.etd-select {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 0.9rem;
background: white;
}
.etd-range-group {
display: flex;
align-items: center;
gap: 12px;
}
.etd-range {
flex: 1;
height: 6px;
}
.etd-range-value {
min-width: 35px;
text-align: center;
font-weight: bold;
color: #764ba2;
font-size: 0.9rem;
}
.etd-color-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.etd-color-input {
display: flex;
align-items: center;
gap: 6px;
}
.etd-color-input label {
margin-bottom: 0;
min-width: 70px;
font-size: 0.85rem;
}
.etd-color {
width: 40px;
height: 35px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.etd-shapes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 8px;
}
.etd-shape {
text-align: center;
padding: 10px 6px;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.3s;
}
.etd-shape:hover {
border-color: #667eea;
background: rgba(102, 126, 234, 0.1);
}
.etd-shape.active {
border-color: #764ba2;
background: rgba(118, 75, 162, 0.15);
}
.etd-shape-preview {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
font-weight: bold;
color: #764ba2;
}
.etd-preview-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border: 2px dashed #667eea;
border-radius: 10px;
padding: 25px;
margin-bottom: 15px;
min-height: 200px;
position: relative;
}
/* Checkerboard background for transparency preview */
.etd-preview-area.transparent-bg::before {
content: \’\’;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
border-radius: 8px;
z-index: 0;
}
#etd-preview-text {
padding: 20px;
text-align: center;
transition: all 0.3s;
max-width: 100%;
word-wrap: break-word;
position: relative;
z-index: 1;
}
.etd-actions {
display: flex;
gap: 10px;
}
.etd-btn {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.9rem;
}
.etd-btn:hover {
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.etd-copy {
background: #667eea;
color: white;
}
.etd-download {
background: #764ba2;
color: white;
}
.etd-tabs {
display: flex;
margin-bottom: 10px;
border-bottom: 2px solid #667eea;
}
.etd-tab {
padding: 8px 16px;
cursor: pointer;
font-weight: 600;
color: #667eea;
border-bottom: 2px solid transparent;
transition: all 0.3s;
font-size: 0.9rem;
}
.etd-tab.active {
color: #764ba2;
border-bottom: 2px solid #764ba2;
}
.etd-tab-content {
display: none;
}
.etd-tab-content.active {
display: block;
}
.etd-checkbox-group {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.etd-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
}
.etd-checkbox-label {
font-weight: 600;
color: #764ba2;
cursor: pointer;
font-size: 0.9rem;
}
.etd-hidden-code {
display: none;
}
@media (max-width: 768px) {
.etd-container {
flex-direction: column;
}
.etd-shapes {
grid-template-columns: repeat(3, 1fr);
}
.etd-header h2 {
font-size: 1.5rem;
}
}
🎨 Text Shape Designer
Create beautiful text designs – Copy code or download as PNG
⚙️ Design Settings
English
Arabic
R
Rectangle
R
Rounded
C
Circle
O
Oval
👁️ Live Preview
Hello World! مرحبا!