Adjust the sliders below to customize the frosted glass effect
Controls
White
Dark
Accent
Gradient
Mesh
Dark
CSS
→135°
Regular
Medium
Bold
Black
The Quick Brown Fox
Jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
CSS
Dots
Grid
Diagonal
Zigzag
Checker
Triangles
Hexagons
Waves
CSS
Marble
Wood
Stone
Cracks
Voronoi
Organic
Crystal
Lava
Data URL
Film Grain
Digital Noise
Paper
Fabric
CSS + SVG
CSS
All
Social
Video
Print
Web
Large Text (24px)
Normal body text at 16px for readability testing
Small text at 12px — fine print and captions
Rounded
Pill
Sharp
Leaf
Blob
Slant
CSS
Preview
CSS
CSS
SVG
SVG
×
WEBPAGE
DEVICE
SOCIAL
BLANK
CSS
Resize Keeping Ratio
1:1
4:3
16:9
21:9
9:16
3:2
Element
Flat
Concave
Convex
Pressed
CSS
Preview
CSS
Hover here
Move your cursor over this area to preview
CSS
CSS
CSS
CSS Variables
CSS Media Queries
Save your full project (blocks, styles, theme, animations) as a .wdx file. Re-import anytime to continue editing.
.wdx
Import a saved .wdx project file. This will replace your current canvas.
Import an existing .html file. Elements are converted to editable blocks.
Complete standalone HTML file with all styles, fonts, and animation triggers.