🎨 Presets & Advanced Effects
Preset Category
Preset Style
💾 Save Current Design
Advanced Hover Effect
Custom Manual Hover
Wipe from Left
Wipe from Right
Wipe from Top
Wipe from Bottom
Shutter Out Horizontal
Shutter Out Vertical
Circle Reveal from Center
Shine
Pulsing Glow
Draw Border from Corners
Gradient Shift
3D Flip Horizontal
✨ Special Effects & Animations
Entrance Animation
None
Fade In
Slide In From Bottom
Slide In From Top
Slide In From Left
Slide In From Right
Zoom In
Enable Magnetic Effect 🧲
Enable Particle Click Effect ✨
Text, Font & Icon
Button Text
Button Link (URL)
Google Font
Roboto
Open Sans
Lato
Montserrat
Poppins
Source Sans Pro
Raleway
Nunito
PT Sans
Ubuntu
Noto Sans
Roboto Condensed
Inter
Work Sans
Nunito Sans
Fira Sans
Quicksand
IBM Plex Sans
Rubik
Karla
Heebo
Mulish
Kanit
Dosis
Oxygen
Cabin
Exo 2
Titillium Web
Maven Pro
Arimo
Prompt
Signika
Hind Siliguri
Noto Sans Bengali
Mina
Abel
Varela Round
Asap
Manrope
Sora
Space Grotesk
Urbanist
Jost
Barlow
Figtree
Merriweather
Playfair Display
Roboto Slab
PT Serif
Lora
Slabo 27px
Noto Serif
Libre Baskerville
Bitter
Crimson Text
Arvo
Zilla Slab
Domine
Vollkorn
Cormorant Garamond
EB Garamond
Old Standard TT
Cardo
Spectral
Frank Ruhl Libre
Tiro Bangla
Cinzel
Philosopher
Unna
Oswald
Anton
Bebas Neue
Lobster
Pacifico
Caveat
Dancing Script
Shadows Into Light
Indie Flower
Comfortaa
Yanone Kaffeesatz
Permanent Marker
Architects Daughter
Satisfy
Great Vibes
Teko
Fredoka One
Patua One
Righteous
Alfa Slab One
Kaushan Script
Sacramento
Cookie
Handlee
Acme
Amatic SC
Abril Fatface
Concert One
Poiret One
Questrial
Rajdhani
Signika Negative
Galada
Roboto Mono
Source Code Pro
Inconsolata
Space Mono
Ubuntu Mono
PT Mono
Cutive Mono
IBM Plex Mono
Font Weight
Light
Regular
Medium
Semi-Bold
Bold
Black
Font Size
16px
Letter Spacing
0.5px
Text Transform
None
Uppercase
Lowercase
Capitalize
Text Color
Icon Settings
Icon
None
Arrow Right
Arrow Left
Arrow Up
Arrow Down
Chevron Right
Chevron Left
Chevron Up
Chevron Down
Angle Right
Angle Left
Double Angle Right
Long Arrow Right
External Link
Plus
Minus
Close / Times
Check
Edit
Trash
Save
Refresh / Sync
Download
Upload
Share
Send
Print
Search
Filter
Sign In
Sign Out
Rocket
User
Users
Settings / Cog
Home
Info
Help
Heart / Like
Star / Favorite
Comment
Envelope / Mail
Phone
Location
Calendar
Clock
Notification
Bookmark
Link
Camera
Video
Shopping Cart
Credit Card
Lock
Unlock
Tag / Price
Thumbs Up
Thumbs Down
Facebook
Twitter
Instagram
LinkedIn
YouTube
WhatsApp
Pinterest
GitHub
Telegram
Discord
Slack
Icon Size
16px
Icon Color
Icon Position
Before Text
After Text
Layout & Sizing
Padding (Y)
14px
Padding (X)
28px
Full Width
Transition (s)
0.30s
Background & Border
Background
BG Type
Solid
Linear Gradient
Image
BG Color
Color 1
Color 2
Angle
90deg
Image URL
Size
Cover
Contain
Auto
Repeat
No Repeat
Repeat
Repeat X
Repeat Y
Position
Center
Left Top
Left Center
Left Bottom
Right Top
Right Center
Right Bottom
Center Top
Center Bottom
Border
Width
0px
Border Radius (px)
Color
Shadows (Normal State)
Add Shadow
Hover State
Hover Text Color
Hover Icon Color
Hover Border Width
0px
Hover Border Radius (px)
Hover Border Color
Hover Background
Hover BG Type
Solid
Gradient
Image
Hover BG Color
Color 1
Color 2
Image URL
Size
Cover
Contain
Auto
Repeat
No Repeat
Repeat
Repeat X
Repeat Y
Position
Center
Left Top
Left Center
Left Bottom
Right Top
Right Center
Right Bottom
Center Top
Center Bottom
Hover Shadows
Add Hover Shadow
Hover Transform
Hover: Scale
1.05
Hover: Move Y
-3px
Hover: Rotate
0deg
Code Format:
Standard CSS
CSS with Variables
SCSS
Tailwind CSS
HTML
Copy
CSS
Copy